Having talked about my favourite typefaces, I figured I’d also talk about how I pair those typefaces when using them in various projects.

Here I’m talking mostly about pairing body text and heading typefaces for reading (like on websites or in PDFs) and for writing (like when writing blog posts like these in Microsoft Word).

How do you pair typefaces?

Select your body text typeface and then for the heading typeface choose between harmony and contrast…

Harmony

Use the same typeface and maybe pick one with a different weight (eg Regular for the body text and Extra Bold for the headings).
Pick a typeface from the same superfamily (eg body text in Source Sans and headings in Source Serif), though this isn’t guaranteed to be the best option in every scenario.
Stick to the same broad design classification, ie organic (friendly, warm, human) or mechanical (geometric, stiff, regular). Contemporary typefaces sometimes mix features so this works best with older typefaces.
Pick a typeface from the same type designer or type foundry. This doesn’t always work with large foundries like Linotype and Monotype, but works with smaller ones like Hoefler&Co.
Pick a typeface with the same mood, vibe, or feel.

Contrast

Pick a typeface from a different category, ie serifs with sans serif (or semi-serif).
Pick a neutral typeface that doesn’t change the vibe of the body text but still provides a visual difference.
Pick a typeface that maintains or enhances the vibe of the body text. If your body text is sharp and angular pick something equally (or even more) sharp and angular. This works best if your body text typeface has a distinct or strong character.
Pick a typeface that creates its own vibe if the body text you’re using is somewhat neutral, meaning it doesn’t have a distinct or strong character.
Pick a typeface that creates design tension. Don’t change the vibe (unless you really know what you’re doing), but you can change the feel. To use an analogy: don’t change cuisines in the middle of your meal, but you can pair something soft with something crunchy.

Whatever you do, do not pick typefaces that are only slightly different from each other. This ends up looking wrong.

(FYI, the Font Matrix is an incredibly useful concept when it comes to pairing typefaces.)

Acquiring these typefaces

I’ve included links to all the typefaces mentioned below in case you want to purchase them or download the free ones:

Paid typefaces are in orange with a dollar sign next to them.
Default or free typefaces are in blue with a Windows, Mac, or download icon next to them.

And, in case you’re wondering, the text I’m showing in the graphics below is from an anecdote I shared about a work trip to the Gold Coast ten years ago.

Serifs

TT Jenevers

TT Jenevers is one of my favourite typefaces. It works great in text but also works as a display typeface, so I usually pair it with its own Extra Bold weight. If I want an interesting contrast, I’ll pair it with Fact (a modern remake of Frutiger). But if I want something neutral, I’ll pair it with Helvetica.

Mercury

Mercury is designed by Hoefler&Co and I pair it with another one of their typefaces, usually in this order: Whitney (vibe = elegant, modern), Ideal Sans (vibe = warm, human), or Verlag (vibe = classic, art deco).

Stempel Garamond

Stempel Garamond is one of my favourite Garamonds and I usually pair it with Fact (a modern remake of Frutiger). If I want something more friendly, I’ll pair it with Gill Sans Nova (a modern remake of Gill Sans). But if I want something fancy, I’ll pair it with Jost* (a modern remake of Futura).

Charter

For Charter (which also has an ITC version) I tend to stay neutral and solid, and so I usually pair it with the Extra Bold weight of Public Sans (or Libre Franklin). If I want to be even more neutral, I go with Neue Haas Unica. Or sometimes I go with Inter (which is a remake of Roboto that’s optimised for user interfaces).

Vollkorn

Vollkorn is a down-to-earth typeface, so I don’t pair anything fancy with it – that’s why I usually go with Inter (a modern remake of Roboto) or sometimes Roboto itself. Though if I want a more lively vibe, I go for Neue Haas Unica (a friendlier version of Helvetica).

Crimson Pro

Crimson Pro is a contemporary, Garamond-inspired typeface and so I tend to match it with Fact, a contemporary Frutiger-inspired typeface. If I want something more neutral and geometric, I go with Inter (a remake of Roboto). If I want something lively, I go with Neue Haas Unica (a friendlier version of Helvetica).

Source Serif

Source Serif is inspired by typefaces like Fournier and I almost never pair it with anything other than Source Sans, which is its equivalent in the Source superfamily. If I had to pair it with something else, I’d go with something neutral like Helvetica or Roboto.

Sans serifs

Ideal Sans

Ideal Sans is one of my all-time favourite typefaces. It’s from Hoefler&Co and I pair it with another one of their typefaces, usually in this order: Sentinel (vibe = classic + contemporary), Whitney (vibe = elegant, modern), or Verlag (vibe = classic, art deco).

Whitney

Whitney is also one of my all-time favourite typefaces. It too is from Hoefler&Co and so I pair it with another one of their typefaces, usually in this order: Mercury (vibe = friendly, compact), Verlag (vibe = classic, art deco), or Whitney Narrow (vibe = elegant, modern).

Fact

Fact is a contemporary Frutiger-inspired typeface that I like to pair with TT Jenevers (Extra Bold). If I want something more straightforward I pair it with its own Extra Bold weight. If I want something classic, I pair it with Crimson Pro, a contemporary, Garamond-inspired typeface.

Fira Sans

Fira Sans is a “wider, calmer” (and free) version of FF Meta, at least according to Erik Spiekermann who created both those typefaces. I like to pair it with TT Jenevers, a Dutch-style serif due to its asymmetrical shapes and ovals that don’t have a uniform slant angle. You’d think this pairing wouldn’t work because they both have their own strong personalities, but the modern Fira Sans works nicely with the classical TT Jenevers. If I don’t want that modern/classical contrast, then I use Merriweather instead – another modern, legible, web-first typeface with its own character. But if I want to go a little more neutral, but still highly legible, I go with General Sans (which I now use wherever I would have otherwise used Montserrat all those years ago).

Source Sans

Source Sans is inspired by typefaces like Franklin Gothic (Linotype have their own version of this, which they named Trade Gothic). I almost never pair it with anything other than Source Serif, which is its equivalent in the Source superfamily. If I had do pair it with something else, I’d go with a modern serif like Merriweather or Noto Serif.

General Sans

General Sans is a compact (but still readable) geometric typeface that isn’t spiky and expressive like Futura but also isn’t neutral and boring like Roboto. That said, I usually pair it with Jost*, which is a modern remake of Futura. If I want contrast, I go with the matching bigness and orderliness of Noto Serif. But if I want a more interesting contrast, I go with Gill Sans Nova, which is an old-style/geometric hybrid that’s full of character.

Avenir Next LT

Avenir Next LT is a more versatile and fleshed-out version of the original Avenir; while Avenir itself is a more humanist take on the geometric typefaces Futura and Erbar. (I use Avenir Next LT when I want a more geometric version of Whitney but I don’t want something as sharp as Jost*.) I usually pair Avenir Next LT it with Zilla Slab, which brings a nicely contrasting futuristic vibe. If I want something more grounded, then I pair it with Sentinel. Though sometimes I find the best pairing is with Avenir Next LT itself.

Slabs

I don’t use slab serif typefaces enough to have a favourites list, but these are the three I use most often:

Zilla Slab, an open-source typeface from Mozilla and the one I’ve used in the headings of all the graphics above.
Roboto Slab, an open-source typeface from Google that I don’t use often, but is good to have when I need it.
Sentinel, which I’ve mentioned above but am including here for completeness’ sake.

Final thoughts

I hope the three of you who made it all the way to the end of this post found it interesting and maybe even useful :)

Since you did make it here, please comment below and tell me what your favourite typeface pairings are and what you use them for. I’d love to know.

FYI, I usually write my blog posts in Microsoft Word with body text in Ideal Sans and headings in Sentinel. But this one I wrote with body text in TT Jenevers and headings in TT Jenevers Extra Bold.

Screenshot showing the top of this blog post as it was written in Microsoft Word using the typefaces TT Jenevers for body text and TT Jenevers Extra Bold for headings.

Note: The Windows, Office, and Mac icons used in the graphics above are by ‘Pixel perfect’, ‘Pixel perfect’ and ‘Freepik’, respectively. Also, if you’re interested, these are the typefaces that come preinstalled with Microsoft Windows and Apple macOS.

4 Jan 2024 update: In the ‘Charter’ section (and the ‘Pairing serif #4: Charter’ graphic) I swapped Trade Gothic (a paid typeface that is, however, downloadable for free on Windows) with Public Sans (a free and open-source typeface).

14 Mar 2024 update: I only recently realised that Avenir Next LT has been included in Microsoft Office since 2019, so I’ve now added my favourite pairings for this typeface as well.

26 Mar 2024 update: Since I added Avernir Next LT as the seventh sans serif typeface on this list, to balance things out I added Source Serif as the seventh serif.