P is for Pairs
Published by Nick at
Disclaimer: You don’t always need to pair typefaces. You can launch a revolution with one font. Martin Luther’s 95 theses and Tim Berners-Lee’s first website only used a single typeface. These days you can totally get away with a minimalist design, and use one typeface at one size, with an italic style for emphasis, and maybe a bold weight for headings for your entire document or project.
But sometimes you need (or want) to add more hierarchy and visual variety within your layout. That’s what we’re here to talk about today: combining typefaces.
Quite honestly, the best advice I’ve found for combining type was an article published late last year by Jake Giltsoff. Jake recommends three things:
starting with a base font or “anchor” (usually the body text font)
balance contrast and similarity (example: pair a sans and a serif with similar x-heights)
consider the job each font has to perform, as well as the emotion (vibe) it presents
I’m not going to attempt to rewrite his whole article, but instead insist that you go read The 3 Secrets to Font Pairing now, and return here for a few more augmented tips.
Level one: Try a suggested font pairing or proven font pairing.
Every typeface entry on Typewolf includes a suggested font pairing, plus examples of websites (or screenshots, it’s a decade+ old project now) using that font along with the other fonts on a particular site. Fonts in Use similarly features a range of print and digital projects for each typeface in its collection.
For any typeface you can imagine, there are range of font pairings that have already been tried on successful projects. I like to use these websites as starting points, not necessarily to lift type combinations verbatim, but to get an idea of the what’s out there, and similar combinations to explore.
Check out books, magazines, etc. to see what combinations work and don’t work and use this as inspiration for your own designs.
Level two: Use a superfamily.
A superfamily is two or more typefaces with the same name, but different classifications. Examples include the IBM Plex family (Sans, Sans Condensed, Serif, and Mono), or Adobe’s Source Sans, Source Serif, and Source Code Pro. Typefaces in superfamilies are usually drawn with the same skeleton and share proportions, optical sizes, shapes, and flavor. A few of my favorite superfamilies include:
FF Meta and Meta Serif (designed decades apart!)
Proxima Nova and Proxima Sera (also designed decades apart!) by Mark Simonson
The Freight Collection (serif in a number of optical and display sizes, plus a sans) by Joshua Darden
The Panel family (Serif, Sans and Mono for each) by Mark Caneso
The Questa project (Serif, Sans, Slab, and Display/Grande)
Level three: Consider fonts by the same designer/foundry.
Beyond using two typefaces designed to pair together, you can also get interesting results trying out fonts designed by the same person, or released by the same foundry. While the genre or approach may be different, the designer’s hand will be in both drawings and inform the look of the letterforms. Here’s a few example combinations:
Founders Grotesk and Tiempos, both by Kris Sowersby
Miller Display and Verdana, both by Matthew Carter.
Knockout for headlines with Sentinel for body text, both by Hoefler & Co.
Level four: Use something like the font matrix.
Oliver Schöndorfer has an extensive article and video on the font matrix, based on the ideas of typographer and educator Indra Kupferschmid. The idea behind the font matrix is that it groups fonts by relationship to things like the skeleton of the letterforms, the contrast of the strokes, and finer definitions (shape of serifs, inline features, texture, etc.). I think of the font matrix as the homework for Jake Giltsoff’s 2nd secret, balancing contrast and similarity.
All levels: Test, test, test!
Combining type is notoriously difficult. Because it isn’t easy, I think it’s worth doing well, and not outsourcing to something like AI. And I mean testing type combinations with real content, not abstract dummy text like lorem ipsum. It takes a human eye to figure out what feels right. Two typefaces that seem right on paper may not have the desired effect when put together.
Sometimes marvelous things happen. I paired two Google fonts for an earlier iteration of this website, and their names were Epilogue and Literata. And it worked! I added a third font, IBM Plex Mono (which has some typewriter heritage) for supporting text. There was no clear relationship between these three fonts, except I wanted to pick a sans, a serif and a monospaced font with fallbacks to Arial, Georgia and Courier.
Advanced level type combinations
I never contemplated using four or more typefaces in a single design until I read this wonderful article by Bethany Heck eight years ago.
Don’t design for other designers, design for your audience. Using multiple families can mean you have to make fewer compromises, and it gives you an opportunity to create rich, distinctive palettes. Every typeface you add makes your visual language more nuanced, which can aid, instead of hinder, clarity for your audience and establish an aesthetic that is unique.
The key rule for using more than two typefaces in a design is to make sure you are picking each font for a single purpose and using it consistently: One typeface for body text; One typeface, one weight for headlines; One typeface, one weight for sub-headings; One typeface, one weight for captions; One typeface, one weight for block quotes; One (monospaced) typeface for code samples, etc.
You can use a completely separate set of typefaces for a book jacket versus the interior of a book (often its two different designers in two different departments working on these). I always find it satisfying when there is a typographic connection to the inside of a book with it’s cover.