Font pairing: A guide to combining multiple typefaces and fonts

When I was very unfamiliar with the tips and tricks around font pairing, I had a hard time finding answers on Google. A few years full of design experience later I still see very few good articles explaining the know-how on pairing fonts. But good font-pairing can make or break design in terms of aesthetics, hierarchy, and balance. In this article, I will show you how I pair fonts, what tips I have for you and show you good and bad examples.

Why good font pairing is important

Good font pairing makes a design more pleasant to look at. A visual more aesthetically pleasing design raises trustworthiness, according to the research of NNGroup: “Design quality: professional appearance feels solid” and this article about the relation on design quality and reliability I myself dive deeper into the topic ‘Why Beauty Matters’ here.

For who is this article

Either you are

• aware of what good font pairing looks like and can spot the difference between good and bad font pairing. But don’t know how to achieve this yourself.
• or you can’t tell the difference and want to train your eye in differentiating the good from the bad examples.

Font pairing: A balance between similarity and difference

All the tips and bits of advice below are about finding a balance between similarity and difference; contrast if you will. The general lesson and my general advice in one sentence would be: when pairing two fonts, don’t make them too different, but also don’t make them too similar. Somewhere in the middle is the answer and the following 5 tips help you find that balance.

Contrast in weight.

On a very basic level, you can use font weights for good font pairing. When you stay with the same typeface, a bold and regular combination often works well. For example PT Serif bold 16px with PT Serif Regular 16px. This is an easy one, however…

Contrast in size

…you almost always want to play around with size as well. Font sizes that are too close together (such as 16px twice) feel too similar. Too much difference might feel odd again. Say 72px PT Serif bold and 16px PT Serif regular. Even 24px with 16px might be a bit boring, even though the contrast is bigger than before. Making it even larger is something we refer to as tension in the design: finding that balance, or edge if you will, between odd and boring. See the examples below.

(For in-between reading: here I explain the difference between a typeface and a font)

Contrast in typeface characteristics

So far we’ve only talked and shown examples with the same typeface twice. A third option to add contrast is to use different typefaces. And whether two typefaces fit well together is mostly based on their difference in characteristics.

A typeface has loads of characteristics if you look a little closer. You got the ‘a’ with a circle or the ‘old school’ a, so to speak. You have variations in the g ‘loop’, or multiple variations in de ‘l’ stem. If all those items are different in the two used fonts, they look too different and don’t match. If you have two typefaces which look very much alike, the difference is too small and it looks odd as well.

In the image above you can see that Muli and Poppins share a lot of characteristics. Based on this we can guess that Muli and Poppins don’t pair too well (I advise to look at more than just one character though). They are too alike to clearly tell them apart, but somehow you sense they don’t really match together. On the other side Poppins and Raleway have enough differences to make a good match. See the examples below.

Contrast in x-height

A fourth method in creating contrast is with comparing the x-height. I often use the ‘handgloves’ method for this, see the image below. The basic idea is to put two fonts on the same line, draw lines on the baseline, cap height and descender line, and see how different they are. If they are too similar, they probably don’t combine well. If they are too different: same story. I have two examples below where I try to find a good font to match with my PT Serif body text.

Good information about typeface anatomy if you are interested. 

Contrast in color

And last but not least, a rather easy one, you can create some contrast with color. I usually apply a difference in contrast. As seen in the example below, when I’m in doubt whether the difference between the title and body text is big enough. If I have already a huge difference in size, type characteristics, and weight, color is probably too much.

Font pairing: combining the guidelines

As mentioned in the above paragraph, the challenge is to not overdo it. We have several factors to play with, you could either go all out on one aspect and leave the rest. For example, Gotham Bold 72px with Gotham Regular 16px might just work. But if you change too many aspects and create a contrast that’s too big, it might not be a match. Two examples about this below:

Good luck pairing fonts to achieve a high-quality design 🙂