How To Pair Fonts

You have followed my advice and chosen a font you like. Great. Good job, you did great. Now you get to choose another one.

If you look carefully at most websites, you will see that headlines are typeset in a different font than the body of the text. There’s a technical reason for this as well as an aestethic one.

Let’s examine first the technical reason: fonts are designed to look good at certain sizes. A font that works well in 9pt might not work at all at 18pt or 20pt. If your headlines are going to be bigger than the text—and most of the time they will be—you need to use a different typeface.

The aestethic one is that you want the headlines to stand out. Everything in the same font can get boring. You can use color to achieve this—most websites do—but changing the typeface is so effective that both are usually done.

So how do you go about choosing that second typeface?

Font pairing is like wine pairing. There are wines that go better with some kinds of foods. Reds with meats, whites with fish.

Same thing with fonts. There are fonts that go well together and others that clash. As with wines, pairing is about trying different combinations and seeing what works before you present them to the world.

It helps to start with some guidance though. Here are some guidelines for pairing up different typefaces.

Guidelines

Keep the following guidelines in mind when combining typefaces. These are not rules, you can break them if you want; but if you follow them, your chances of getting a pleasant combination will increase significantly.

Choose contrasting typefaces (but not too contrasting)

What you’re looking for when pairing fonts is contrast. Otherwise you would just use the same font for both text and headlines. Boring!

Contrast is good. Clashing is bad.

The worst crime is the unholy union of clashing fonts. Like serving ’82 Château Lafite with Gorditas from Taco Bell.

So how do you go about adding some contrast but not overdoing it?

Serif typefaces go with sans‑serif typefaces

The most common way to get some contrast is to combine serif with sans‑serif typefaces.

The advise you’ll generally hear is to use serif for the body of the text, and sans‑serif for the headlines. Most books are typeset this way.

Some websites do the opposite and use sans‑serif for the body and serif for the headlines. The rationale for this is that screen resolutions are not good enough for using serif on the body, but using it in a larger size is okay. I don’t believe this.

This website is typeset in serif with sans‑serif headlines. Like a book.

Choose typefaces from the same designer

Like most artists, typeface designers develop a certain personal style. If you choose two typefaces from the same designer, it’s more likely that they’ll go well together. Of course designers can produce typefaces that clash with each other so it’s not really a guarantee.

If you mix designers you should familiarize yourself with their work and make sure their styles don’t clash.

Avoid novelty fonts

Unless you are 5 years old and are designing a sign for your lemonade stand, you should avoid all those novelty fonts that came with your computer. For instance, Papyrus headlines with Marker Felt text.

Follow Designer Recommendations

If you look at the websites of typeface designers, they usually offer pairings that have been designed to work well together. They also explain what they designed the typeface for.

Read their explanations. Think of it like the instruction manual of the typeface.