The Only Font Pairing Guide You’ll Ever Need For Your DIY Designs

Some say that 95% of graphic design is typography. It can make or break any perfect colour scale, layout, or a carefully-crafted website. It can cause people to stop reading the text in front of them and say “wait, there’s something off about this page”. It has the power to make a logo recognizable even though it uses the same old Helvetica Bold.

Picking the right fonts and combining them together can be hard even for seasoned designers. Have you ever noticed that designers normally use only a couple of typefaces in all their work? That’s partly because fonts can be very expensive, but also because font pairing is such a hassle. In this article, I’ll try to break down this complicated process and give you a couple of examples.

Hey, wanna cheat a little? Download our free list of 16 gorgeous font pairings that you can use right away. All fonts are free and embeddable on the web.

How to Pick a Font

First, we’ll talk about picking fonts in general.

By Content

Nothing is more important in graphic design than content. If there wasn’t any content, then we’d have nothing to design — therefore you need to pay special consideration of where a font will be used.

Is it going to be a headline? Will it complement a logo? Some fonts can’t possibly be used for blocks of text, for example:

By Character

Some fonts, like Helvetica, are pretty generic — they offer no story, no message with its the design. On the other hand, there are fonts with a lot character, like for example Kaushan Script. Be sure to take the font for a test drive and think about how its character will connect with your brand and your audience. If you’re selling wedding dresses, a monospaced font might not be a good idea — and unless your business fixes old typewriters, such a font will not be applicable.

Should You Go Premium Or Free?

Why would you want to buy a font family for the actroscious price of $400 when there are so many other, free ones you can use?

Well, premium typefaces generally include far more fonts, and the quality is superior. But will your website visitors notice it? This question deserves a much longer debate than what I have the space to concieve here. Let me just add that if you pick the wrong fonts, despite all the efforts to improve your design, it will still not “feel” right, even to design-oblivious customers.

Check Glyphs

This might be slightly irrelevant for you if you reside in an anglosaxone country, but I have to mention it nonetheless. Before purchasing or deciding on a font, always make sure that it has all the characters you need. Last time I forgot to check the character subset for Slovene and bought the wrong font. I was forced to draw the letter “?” in all the fonts of the typeface that didn’t include them. Typography gods please forgive me.

Google fonts and some other font searching platforms offer an option to pick the subset that needs to be supported by fonts.

By Medium

Not all fonts are embeddable on the web. If you need one that will be used in websites and apps, you’ll need to own a special license that is oftentimes limited to page views or other criteria. Solutions like TypeKit are available if you’re constantly in need of high-quality web-embeddable fonts.

Tips on Font Pairing

Ah, we finally got to combining fonts. I’d recommend to beginner designers (and bootstrapping designers) to only use 2 fonts, simply because combining 2 is much easier than combining 3.

If you’re designing style guides — which you should — you’ll need a list of role-based list of fonts to use in your designs. This part of style guides will have everyone on board about which font must be used for which content. You’ll typically need to assign a font for:

• Headlines and sub-headlines
• Body text
• Functional design (buttons, notes, metadata)

1. Contrast

Contrast is a very strong concept that has a role in all aspects of graphic design. With it, we implement variety to design that would otherwise be dull and would not convey importance correctly.

It’s no surprise that in font pairing, this principle is also very useful. If fonts are too similar, there will not be enough contrast for the pattern to work, like in the following example:

We can pair fonts that are different in width, thickness, and style. Typically, combining a serif and sans-serif font works very well. Keep in mind that the more character (all pun intended) one of the fonts has, the more generic should the other one be, like here:

2. Type Foundry

Deciding if a font combinations actually has enough contrast or not can be pretty hard for an untrained eye. If you’re having a hard time finding different fonts, try using two made by the same type foundry (that’s a company that designs fonts). Typically, these will have enough similar features to not look out of place.

Or, you can use a typeface (also known as a font family) and simply pick two very different fonts from it — like these two (Roboto Black and Light):

3. X-height

Yet another tip to help you successfully pair fonts is to compare them by their x-height. This is the height of the character “x” — it varies from font to font, and oftentimes, fonts with similar x-height will combine well.

Conclusion

This is the end of our skinny on pairing fonts. Keep in mind that badly designed typefaces are basically unpairable — there’s no way to fix bad kerning or displeasing glyph design with just pairing it with Helvetica. It’s no surprise that you can often tell the designer by the fonts used; designers have carefully selected font libraries and know exactly which fonts look well together.

Further Reading

Here are a couple more resources on pairing fonts for further reading:

• Download our list of 16 free font combinations (scroll back up 🙂
• Best Practices of Combining Typefaces
• 29 principles for making great font combinations
• Mixing Typefaces [.pdf]