web typography study guide

How to Combine Typefaces

Combining typefaces is not an easy task. Unless there's a very good reason to use more, fewer is always better. Usually a good strategy is to use one or two type families to get the most impact in the design, and to create visual hierarchy with various type styles, scales, and colors. Here are some strategies and principles to follow to combine typefaces.

Family Comes First

Many text can be set beautifully in only one typeface. The safest bet in creating continuity in visual form is to rely on a single large type family. A large type family provides a range of versatility with various weights and styles while sharing a consistent structure.

Combine Typefaces from Different Classifications

Use multiple type families provides a broader typographic palette. Not only does it help to create hierarchy, but it also enhances the typographic color, rhythm, and texture of the design.

Combing typefaces from different classifications, such as a serif and a sans-serif or a serif and a script, is a good strategy for producing a mixture that has proper contrast and yet doesn't clash.

To look for compatible typefaces from different classifications, the designer needs to pay attention to the letter-forms, the mood inherent in the typeface, the weight, and the proportion.

The letter-forms that make up a typeface can be incredibly varied based on a number of factors, such as historical influence or overall style. One of the quickest ways to check compatible letter-forms is to check the letters a, g (single-story or double-story), e, t, and f [fig.1]. Differences in letter-forms are not necessarily a deal-breaker in typeface choices, but more similarities than differences is usually preferred.

Typefaces are not just forms, they also have personalities. One common typographic mistake is not recognizing the inherent mood of a typeface. Select typefaces that have not only similar moods, but also moods that match the project [fig.2].

Proportion is probably the most important thing to consider, especially when combining typefaces in a single line (such as in a header or logo). Their respective x-heights should be close to the same size, the ascenders and descenders should be about the same length and the general width of the characters should be similar [fig.3].

Combine Typefaces from Same Classification with Different Sub-Classes

When combining typefaces within the same classification (serif + serif, sans-serif + sans-serif), it is never a good idea to combine typefaces that look very similar in structure (for example, Times New Roman and Garamond). Something that almost matches looks like a mistake. The typefaces need to show enough contrast so that they are immediately recognizable as different ones, while also share similar moods, structures, and other factors that tie them together. One trick is to choose typefaces that are in the same general classification but that fall under different sub-classes. For example, a slab serif pairs with a modern serif [fig.4], or a geometric sans-serif pairs with a grotesque [fig.5]. This provides more contrast right from the start.

 

tip  Combining typefaces should always keep at least one characteristics of the typefaces consistent, be it proportion, weight, letterform, line quality, mood, or historical time period. Hoefler & Frere-Jones has a great article about ways to combine fonts in a design. The four tips are built around one principle:

    Keep one thing consistent, and let one thing vary.

In all the effort to sort through large typeface libraries looking for just the right combination, it is often easy to overlook the sometimes obvious and much easier choices:

  • Use a classic sans-serif and serif combination.
  • Use typefaces that have neutral personalities (for example, Helvetica and Garamond)
  • Use different font styles within the same font family.