Skip to content
FontsNotoIconsKnowledgeFAQ

Pairing typefaces

The following guest article was written by Elliot Jay Stocks*

Once we’ve spent all that time and effort choosing a primary typeface for our project, we get to do it all over again for a secondary typeface.

With so much great type out there, it’s very tempting to use it all. But first, a quick reality check: Do we really need a secondary typeface? Have we explored all of the possibilities on offer in our primary one, such as the various weights, styles, widths, and optical sizes? Even typefaces that contain just one font can be adjusted—with size, case, and tracking values—to create contrast in our text.

Let’s look at some scenarios where the answer to the question “do we really need a secondary typeface?” is a definite “yes:”

1. Changing context

If we need to display data alongside editorial text, or perhaps set an aside or footnote, we might benefit from employing a secondary typeface that’s notably different—perhaps even notably different in tone.

A heading and paragraphs of text on the left, with “key facts” displayed in a separate column of text, representing an online newspaper article. The primary text is set in a serious serif typeface; the facts are set in a modern sans serif typeface.

2. Augmenting a brand’s personality

When the brand’s primary typeface is too serious, it may need combining with a more friendly typeface to more accurately capture the accessible feel of a brand.

“Insurance options to suit everyone’s needs”—set in a heavy, contemporary serif face—followed by “including students“—set in a handwritten-style face.

3. Adding additional weights, widths, or styles

It could be that the primary typeface doesn’t offer enough variation, perhaps being limited in the number of weights, widths, or styles—which could be as simple as not having a different weight to use as a heading. Some typefaces don’t have italics, so rather than have italic text rendered as a faux italic, we could choose a secondary typeface to use instead.

“If only there was a way we could emphasize it” set in a modern, semi-flared sans serif typeface, except for the word “emphasize”, set in a calligraphic face.

Although the x-height doesn’t match, note how the lavish ascenders and descenders makes up for it, and the stroke weight appears approximately the same.

4. Accounting for missing features

If our primary character is missing features, such as support for international characters, a secondary typeface can be used in body copy, where encountering these characters is most likely.

An article with an English-language heading and Icelandic-language paragraph text, set in different typefaces.

In all circumstances, it’s valid to employ a secondary typeface if we need it to do things that our primary typeface cannot.

Jessica Hische, in her article “Upping Your Type Game,” suggests we pair typefaces by considering their relationship to each other as relatives in a family. (Not a family in the typographic sense of the word, but one we’re perhaps more accustomed to: Siblings, cousins, distant relatives, etc.) While the type pairings could indeed be from the same literal typeface family, Jessica suggests we look for similarities across seemingly unrelated typefaces that might tie them together:

A recreation of Jessica Hische’s diagram of related type family members.

A “sibling” typeface in this example might have a similar x-height, similar contrast, similar width, and may even share similarities in some of the more abstract traits of a superfamily, such as similar mood and similar style, whereas a cousin may only possess two or three of those shared properties. A distant relative might only have one connecting factor, but depending on what that factor is and what we’re setting out to do, it might be enough to justify the pairing.

We should also be aware of the implications of combining typefaces that might come from different historical periods—a consideration we explore in our article “Emotive considerations for choosing typefaces.”

The single biggest challenge we face when pairing type is choosing a secondary typeface that’s different enough from our primary choice, but not too different. Jason Santa Maria, in his book, “On Web Typography,” refers to this as the balance between distinction and harmony:

[...] you need to choose typefaces that don’t compete too much with each other, but aren’t so similar as to be indistinguishable. [...] When in doubt […] pair a serif and a sans serif. This provides you with what are likely the two most flexible kinds of typefaces, and nearly guarantees you have sufficient variation.

In music, harmonious sounds are created by notes with significant separation. Combining notes that are too close results in dissonance—just as with type.

On the left, a heading set in a sans serif typeface and a paragraph beneath it set in a serif face from the same family. On the right, a sentence set in a sans serif face, with the serif version from the same family used inline instead of a bold weight.

While pairing typefaces usually refers to the combination of two, the same logic and analysis should apply whether we’re combining two, three, four, or more typefaces in a project. And again, we must always check whether it’s absolutely necessary to add more.

External resources:

* Content is owned by Google. Thank you to Bruce Willen, Frank Rausch, Jason Santa Maria, Matthew Smith, Micah Rich, Mike Kus, Thomas Jockin, and Tyler Finck for reviewing this content.

Pairing typefaces – Fonts Knowledge - Google Fonts