8 Bits On Combining Typefaces

The following post is a guest post by Vivien who runs Inspiration Bit. Vivien is a web developer and freelance web and graphic designer from Vancouver. Her post came at a good time as I have been battling a cold/flu for the last few days. Thanks for the great post Vivien.

Whether we like it or not we’re constantly dealing with type. Type is everywhere - on websites that we visit daily; in magazines, books and newspapers that we read on a regular basis; on the street and store signs; it’s used on packaging of products we consistently buy, and even on TV in commercials, movies and the list goes on. When used correctly Type doesn’t distract our attention from its main goal - deliver a message in the best readable way possible.

However with so many typefaces available it can be a daunting task to pick and combine the right typefaces for the task. I’ll try breaking the selection strategies into 8 bits to help you with achieving the most effective type combinations.

1. How many typefaces can be used?

   As a general rule of thumb, there’s a very little need in using more than two typefaces or type families in a design. However, this rule can be broken depending on the project. First of all, what is the point of using different typefaces in design? The obvious answer is to differentiate certain elements of design. A typical page can consist of more than one element such as plain body text, headlines, subheads, sidenotes, captions, numbers.

   If a design doesn’t have much text then using more than one typeface may look too garish. On the other hand, if a design has lots of content with various elements that need to be projected differently, then more than two typefaces may be used to achieve the right effect.

2. Get the terms right.

   It is very important to understand the difference between the terms Font, Typeface and Type Family.
   Font is the variation of type in styles (bold, italic) and sizes (12pt, 1in).
   Typeface describes the shape of characters, created by typographers.
   Type family is a group of related types with the variations in weight, width, orientation.

   To summarize: “Times” is a type family, consisting of typefaces like Times Roman, Times Italic, that can be used as a Times Roman 12pt font or Times Roman 18pt font.

3. Harmonious Combinations

   Perhaps the easiest and safest way to combine multiple typefaces in design is by choosing them from the same large type family. You can simply mix types with various weights, proportions from the same family to differentiate the headline from the body text.

   The best way is to work with so-called “super families” that consist of various subfamilies. Some of the examples of Super type families are ITC Legacy, ITC Stone, Neue Helvetica, Zapfino.

4. Mixing Serifs with Sans Serifs

   While working with the types within the same family produced harmonious combinations, using the opposite typeface styles generate a better visual interest by adding more depth to the overall layout. The simplest approach here would be to combine serifs with sans serifs. As long as you don’t pick serif and sans serif typefaces with similar designs (i.e. Times with Arial Black) you will almost never go wrong with combining practically any sans serif type with an opposite in style serif typeface. It works because serifs and sans serifs have very different structures so visually they create a good contrast.

5. Contrast Combinations: Size and Weight

   Choosing two serifs or two sans serifs for your type combinations will work too, but once again you must provide a clear distinction between all characters of type. One way to achieve this is by creating contrast in size and weight. Some types look very different when utilized with a large point size, they look especially good on headings.

   The weight of a typefase is determined by the thickness of strokes. When combining typefaces with different weights it is best to go with the highest contrast: combine Regular with Heavy or Extra Bold instead of just usual Bold or Demi. Contrast in weight is one of the most effective and popular ways of combining types.

6. Contrast Combinations: Colour and Form

   The shape of a letter (character) is referred to as a form, for example caps vs. lowercase, regular vs. italic. Keep in mind that it is much more difficult to read words that are set in all caps, because they take on a rectangular form and we’re forced to read them letter by letter. So avoid using All caps, or all Bold with a large amount of text.

   There are two kinds of colours in typography: black and white - that is achieved by setting headlines and subheads in a heavier wieght, playing with a space between the letters, between the lines, the size of the x-height. This creates an illusion of a darker black colour as opposed to the lighter grayish colour of a regular text.

   Another kind is by actually injecting some colour to your designs. It will attract attention to an element by emphasizing and reinforcing the contrast of the types in the combination. It is very important to keep in mind that the number one priority when combining type and colour should be readability, then contrast. There should be enough contrast between the type and background colour, between two types in the post or a logo.

7. Avoid conflicting combinations

   Don’t mix typefaces that fall into the same type category, for example Georgia and Garamond - they both belong to the oldstyle category. Don’t choose two similar faces, because they don’t give enough contrast and look more like a mistake since they are not really the same but don’t differ much either. This defeats the whole purpose - why choose different typefaces if they closely resemble each other.

   Here are a few typeface combinations that you should steer away from:

   • Avant Garde Gothis with Univers

   • Bodoni with ZapfBook

   • Caslon with Korinna

   • Palatino with Bembo

   For more typeface combinations you can refer to this very useful cheat sheet in PDF.

8. Don’t combine electronically distorted types

   Whatever type combination you choose for your project don’t get tempted by Image Editing software to add Bold or Italic effects to your text. Type designers spend a great deal of time to properly design the italic and bold versions of a type, by carefully adjusting character proportions, shifts in stroke weight. Electronically distorted type destroys important character proportions and stroke weights. So if you want to use typeface Andale Mono, but it comes only as Regular, don’t force a bold effect on it in Photoshop, choose a different type instead or use a big font size.

So here you go, hopefully you’ll find this article helpful when combining different typefaces for your projects. You can also check out my articles on Typographjy at Inspiration Bit: 16 Best-Loved Font Bits In Web Design and 16 bits of Exceptional Typography Resources