Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Principles for Pairing Fonts

Part of the fun of typography is pairing fonts together to establish a typography system for your design. There are a few best practices you can follow as a designer. In this lesson, we will go through each of them.

Generally speaking, fonts pair well together when there is significant contrast between different levels of typography in the form of typeface design, size, weight etc. Designers usually break down the level of typography they need for a design based on the content. Once you decide that, it is time to start experimenting with font pairings.

Let’s say that based on the content requirements, it makes sense to have 2 levels of headings and 1 level of body text. You now know that you will need a typeface for heading and another one for body.

There are multiple ways to go about this.

Choose Typefaces That Convey Your Brand Personality

The simplest way is to first identify a typeface that shares similar character with your brand personality. It is important to choose typeface based on what mood or look and feel your brand needs.

Simply put, your brand is just a list of adjectives (or short phrases) that describe what you want your users to think of you.

Some sites need a brand that’s “clean, simple, and modern”, others want to be “luxurious, modern, and classy”.

Let’s say you’re designing a small site/app about Egyptian history. We want a brand that’s professional, clean, and informative, but about a topic that’s ancient, grand, and a bit mysterious.

Here are 3 takes:

If you’ve played around with your computer’s font list, you may know there is a tragically popular font called Papyrus that, in some sense, feels perfect to finally be used in an actual Egypt-related site.

But this sort of novelty font rarely makes for good design. So it’s best to avoid it.

Likewise, the third font – Chakra Petch – while pretty awesome, is entirely inappropriate for the brand we’re trying to convey. It’s angular, techie vibe would be better for technology-related brands and subjects.

Scala Sans, on the other hand, has a look-and-feel that is more appropriate for this type of site. It is modern, elegant and precise. It is actually considered what we called “humanist sans”, which is inspired by human writings.

Vary Size and Weight If Using One Typeface

Once you picked a nice typeface that goes with the personality of your brand, you have several options.

The first one is to keep using that one typeface throughout. To establish typography hierarchy, you simply need to vary the size and weight of it for different levels of typography. In a later lesson, we will talk about establishing typography scales. A general tip is to make your heading fonts much bigger than your body text.

The text on the left side of this image, for instance, uses a 24-point font for the header and an 18-point font for the body copy. There’s too little contrast in size, which makes it harder for the reader to distinguish what’s most important.

On the other hand, the example on the right uses a big enough header to allow the reader to quickly perceive a visual hierarchy defined by the relative difference in the scale of the typefaces used.

Another way to ensure a clear visual hierarchy is to use varying font weights, with clear differences in the boldness of the fonts used. For instance, you can try combining Didot and Rockwell; you see that they simply don’t mesh well together because they both have a heavy presence.

Or, in the example here, you see that the best combination is achieved by matching the heavy Roboto Black with Roboto Light. The key to achieving the right amount of contrast is to understand that fonts are a lot like people: When you mix two with a whole lot of personality or presence, then you have yourself a discordant design. But when you combine an eye-catching one with a neutral or lighter font, you find harmony.

Choose Body Typefaces Based On Legibility

The next option is to select one typeface for headings and another typeface for body text.

Body text actually has more constraints than heading text because they need to be legible at a much smaller scale. That’s why it makes sense to select typeface for body text based on legibility and simplicity.

Since a good body font’s goal is legibility, if you see a font that’s trying to achieve anything else – character, interestingness, equal-width characters – it’s probably not a good body font. For example, Bodoni’s thin horizontal strokes would be hard to read in smaller sizes because they tend to disappear. Chakra Petch is a typeface with lots of personality and character, which makes it a viable candidate for heading text but not for body. We generally want headings to be more dominant than body for the effect of emphasis as they are intended to be.

Monospace fonts are great coding, but not so natural-looking for most of other purposes, even though if you are looking to mimic a certain retro or techno look and feel, they may be okay.

Instead, look for a plain serif or sans-serif font with a high x-height and open counters.

As a refresher, the x-height is the height of the lowercase “x”. But it’s not so much measured absolutely as it is relative to uppercase letters (or tall lowercase ones, like “h”). Why does this matter? Because a tall x-height means the lowercase letters are, relative **to other fonts the same size, larger – and therefore easier to read.

At the same time, you should also look for typefaces with what we called “open letterforms”. “Open letterforms” means the gaps in letters like “a”, “c”, and “e” are relatively wide. For example, Helvetica’s “c” doesn’t look that far from an “o” – while Proxima Nova’s “c” and “o” are much easier to distinguish.

Don’t Use Two or More Fonts That Are Too Similar

When it comes to choosing two different typefaces for headings and body text, there a rule to remember – don’t choose two different typefaces that look visually similar.

This is because it will be distracting to have two different fonts with not much difference in the design of the characters. You can either stick to one typeface with varying weights and sizes or pair two typefaces that look very different from each other.

Pair Distinct with Ordinary

Compared to body fonts, heading fonts can take the front stage and have more character. When you decided on body text and are now looking for heading fonts, just remember to look for ones that are aligned with the brand’s personality like we discussed earlier.

Assign Distinct Roles To Each Typeface

A good tip to remember is that consistency is crucial to a professional-looking design. One way to do this is to assign a role to each of the fonts used throughout your document. For example, you can use the same font for article titles, another for the body intro, a third font for the body copy and so on.

In the example above, the text on the right looks much cleaner due to the consistent and exclusive use of a type for header and another type for body copy.

Stick To Two, or Maximum Three, Typefaces

For most design projects, having two different typefaces is more than enough. For some larger projects, you may need three typefaces depending on the complexity of content.

Remember, more is not better. Less is more in most design scenarios. Don’t over complicate your typography. Otherwise your design will look scattered and unprofessional.

Don’t Pair Disparate Fonts

Everything in moderation also applies in design. While it is important to pair typefaces that have good amount of contrast in design, it’s not a good idea to pair two typefaces together if they convey extremely different mood.

For example, what happens if we take a typeface with calligraphic flourishes such as Great Vibes and combine it with a serif like Merriweather? We end up with a sense of contrast that’s not very eye-pleasing.

The flourishes and loops of Great Vibes have a softness and a sense of sophistication, while Merriweather is a no-nonsense typeface with a formality conveyed by its serif letterforms. Here, the contrast is too great for the combination to work.

Let’s shift to a more satisfying font pairing. Here in the header, we’re using Vollkorn, a subtly playful serif typeface. We’ve paired it with Open Sans, a more neutral and plain sans serif. This pairing works well because though there is contrast, the subtleness of both of the typefaces make them visually complimentary.

Typography is an art form and not science. The best way to get better at it is to practice and get feedback.

Scroll to Top