Practical Guide to Font Pairing
* The terms “font” and “type”/ “typeface” are used interchangeably and loosely here. Otherwise, the vague explanation of typeface is the design/ family of fonts (Arial, Times New Roman, etc.) and font is the variables of the design (regular, bold, italic, etc.)
Pairing typeface is like writing a couplet — a pair of lines that rhymes or has the same rhythm. The idea is to have something that flows, something that has enough contrast, but at the same time well-matched.
Font pairing decisions are often made based on experience and instinct. Most guides would mention to pair contrasting fonts, avoid similar classifications and mixing moods, etc., but these aren’t exactly clear guidelines. Because, obviously, not all serif and sans serif fonts go together. And you can definitely pair a sans serif with a sans serif.
The best way to start is to choose one of the font you’d like to use first — the heading or body copy font — and then decide which style/ category of font you’d like the other one to be. This would reduce the search by at least half, assuming you’re only considering sans serif or serif type. Then consider the more difficult part — picking the other matching h̶a̶l̶f̶ one. Talking about match(-mak)ing, I came up with a checklist — as one would when finding a partner. 🤭
Make sure when comparing fonts that you are comparing them at the same font size. Don’t try and match the font by making either or bigger/ smaller, especially when you’re using it for web design or designs other than static one-off posters, as it might get messy down the road, systematically speaking.
The 5 key considerations of the checklist are:
1. Category/ classifications of font (i.e. serif, sans-serif, script, etc.)
Honestly there’s not much to be said here — you can use fonts of the same classification or 2 different ones — it doesn’t really matter if there are enough similarities and differences in the other factors.
2. X-height
One of the most popular practical guideline is pairing fonts with similar x-height. Having a similar x-height would greatly reduce the differences in two typeface, and gives a sense of association and an overall harmonious feel. However, don’t be too quick to judge — you might still be able to match fonts of different x-height, depending on the other factors.
3. Character/ glyph width
Similarly, it’s also an option to match fonts by similarity in character width. It might not be as popular a consideration but I think it gives character to the the overall design when you pair a condensed font with a regular one, providing there’s enough similarity in the pair.
4. Glyph styles
Glyph styles are usually overlooked but it’s an additional flair to a type. Does the font have a double storey ‘g’ and ‘a’? Are the dots on ‘i’ and ‘j’s circular or squarish? Does the apostrophe and commas have a ball end?
5. Font weight
The regular weight of one font might not be similar to another and it’s tough to match fonts if the base (regular) type is not of the same weight. Yes, one can argue that you can just bold the type to match but like mentioned above, it might get messy. The best way is always to find something that matches in the first place to do away with future confusion and problems.Here’s some samples of fonts I tried pairing:
If you think it’s a hassle to search and dig through the wide pool of fonts out there, here’s 2 foolproof method:
1. Font family
The simplest way is to just look for a typeface that has a variety of weights and pair the fonts together and ta-da, effortless type set done. (Skip between weights for the match to work nicely.)
2. Font superfamilies
Ok, I’ll admit I just learnt this term not too long ago. I know these families exists but I didn’t know it’s called superfamilies. What an apt name. IF you don’t know, it’s a family of typefaces that are designed in different classifications/ categories. So for example Mr Eaves Sans, a sans serif font and Mrs Eaves, a serif font are designed in a similar style to be paired with each other. I mean if you can’t tell, they’re practically married! Though you can totally tear them apart if you’d like. That’s up to your discernment. 🤷♀️ But if anything, this would be the easiest way to pair fonts, though that would totally reduce the fun of design for me.
With all that’s been said, as with everything else in the world, not every rule is set in stone — definitely use your own discretion. Hopefully these guidelines can help some designers or non-designers get a sense of how to pair fonts. Till next post, 👋.
Read More/ References:
https://99designs.com.sg/blog/tips/typeface-pairing-principles/
https://type-ed.com/resources/rag-right/2017/10/18/3-steps-to-great-typeface-pairs
