Font Pairing – Examples and Rules

The idea behind good font pairing is simple:

Fonts should contrast, but not conflict.

Just as opposites attract with people and relationships, the opposites in fonts are usually a good match. And by opposites, I mean opposites in every characteristic, of which there are many.

Serif and Sans Serif Are Almost Always a Good Font Pairing

What are serif fonts and sans serif fonts? The distinction is just in those small tails.

One of the general rules of font pairing it this: Almost any serif will look good with another sans serif. 

Pick Fonts That Are Opposites of Each Other in Everything

Beyond that, there are easy things you can notice about fonts: some are wide, some are narrow, some are tall, some are short, some have tight spacing some are set far apart. Pick the opposites in everything to make the best font pairing. And one more thing, don’t use more than 3 fonts in an infographic. Use a title font, a subheading font, and a body font. That’s it.

Now let’s look at examples of font pairings.

  1. Tinos and Roboto – Tinos is a wide font perfect for headlines. Roboto is tight and economical. Both are highly readable, made specifically to be readable across all browsers. devices, and document types. Whether you are looking at this image on a 5k display or on an iPhone Se, you should have no problem reading these fonts. These two are the perfect font pairing if readability is your top priority.

2. Merriweather, Roboto Slab, and Roboto – With Merriweather in the headline, you create a pleasant aesthetic experience for the reader. The font is, once again, made for screens. The Serifs are sturdy which makes it readable without squinting. It’s a pleasure to the eye. This aesthetic is fitting for histories, biographies and any subject matter that inspires thinking, pondering, and connecting the dots.

Roboto and Roboto Slab are a good combination when you have two layers of information that need to be distinct yet tied together. Here Roboto Slab makes the date visible even though they are small and not the main focus of the infographic.

3. Bungee Inline, Roboto Condensed, Droid Sans – Bungee is a compact, modern, urban font that creates the feeling of structure, and order. This is a great combination to use for any subject that involves analysis and numbers. Roboto Condensed allows you to fit maximum characters into the heading. Meanwhile Droid Sans contrasts nicely with Roboto because it is wider and more relaxing.

4. Limelight, Oswald, and Open Sans – Every font invokes some sort of emotions. To make people feel a range of emotions through your font choice, choose something asymmetrical. Limelight is emotional for that reason, and in a positive way. Limelight in particular is reminiscent of movies and theater at the dawn of Hollywood’s history. The downside of using “emotional” fonts is that they are not readable on small screens.

In this composition, to balance out the emotions, I used Oswald, a compact vertical highly readable font. Open Sans is the opposite of it in width and thickness – that’s why it is a good font pairing.

Whenever you pair fonts, think about balance. As you learn more about design you will see this law come up again and again. Balanced colors, balanced composition, balanced typeface – all these laws of good design rely on the same thing – balancing through finding opposites. So when you talk about font pairing, you can think of it as “font balancing”, that way you will always have more options.