The Beginner’s Guide to Font Pairing
Most layouts look best when at least two fonts are used to set text. Magazine spreads, book pages, flyers, websites and other text-based designs will always benefit from a well-chosen font pairing. But if you’ve never paired fonts before, where to begin?
This guide shows you five easy ways* to create a failsafe font combination every time, and suggest appropriate ways to use each font pairing style. Read on to find your font dream team…
* These five font pairings are based on using one font for the headline (the main title on your page) and another font for the body text (the longer paragraphs which make up the bulk of content on your page). If you want to add sub-headings or pull-out quotes setting text in an italic weight is always a wise move, or try using a bold or condensed version of your body text font to add contrast while keeping the typography looking polished.
1. Sans Serif Headline + Serif Body Text
This is the most common font pairing style designers will use when they want to make their typography look instantly more polished and professional. Why does this font pairing work so well? Firstly, the pairing has high contrast, which creates interest and stimulates the eye. Secondly, this pairing feels at once both classic and contemporary, which makes it suitable for all sorts of layouts. Finally, bookish serifs tend to be easy to read, while sans serifs add a more modern, sophisticated flourish, making it a pairing that’s both functional and stylish.
Within this font pairing style, you’ll find that certain sans serifs look better teamed with particular serifs. A good starting point is to decide on a headline sans serif that you really love, and then rotate the serif body text through several options until you find the font that looks just right.
One of our favourite font pairings is headlines set in Bebas Neue, with body text set in Caslon. A sub-heading set in Adobe Caslon Pro Italic adds the perfect finishing touch.
2. Headline + Body Text Fonts From the Same Font Family
Most fonts belong to a typeface family—a group of fonts which vary in weight (e.g. bold, italic, book etc) but ultimately have the same base design. A family may also include more stylised variations of the original roman weight, such as condensed, outlined and expanded.
Some font families contain as few as three fonts, while others might extend to include dozens of fonts. These larger font families are known as ‘superfamilies’.
Pairing two fonts taken from either the same family or superfamily is a quick route to creating a design that feels pulled-together and elegant. The success of this sort of pairing rests on the shared similarities between the chosen fonts, rather than contrast, which has a calming effect on the eye. For layouts which require a more traditional, formal or conservative style, this sort of font pairing is the perfect choice.
That’s not to say that sourcing two fonts from the same family needs to be dull. In fact the vast range of font styles you can track down within a superfamily can give you plenty of variation, to keep your design looking playful. We love the combination of a Roboto Slab headline with Roboto body text. These fonts have very different weights but share the same rounded-geometric form.
3. Headline + Body Text Fonts Which Share the Same Mood
All fonts have a personality, whether it’s the bouncy optimism of a rounded sans serif or the serious conservatism of a traditional serif. Each font brings its own personality to a design, helping to give the whole layout a certain mood or vibe.
Professional typographers call this evasive sense of mood that a group of fonts share a ‘sub-category’. Some serif fonts, such as Bembo and Garamond, fall into the Old Style sub-category, with these fonts tending to have an old-fashioned, dignified personality. These work well paired with Humanist sans serifs like Frutiger and Gill Sans, because these too have an old-fashioned, serious mood.
Here a Garamond headline and sub-heading makes a great team alongside Gill Sans body text.
Transitional serifs have a more modern mood than Old Style typefaces, which makes them a suitable pairing for Geometric or Rounded sans serifs, like Futura and Avenir. Here, a headline set in Mrs. Eaves is stylishly offset by Futura body text.
Modern serifs, such as Didot and Bodoni, have a classic elegance but feel more fun and fashionable than their Old Style relatives. Because they are more contemporary in style, they team best with Geometric sans serifs.
In this example, Bodoni and Open Sans make for an elegant font pairing.
4. Display Headline + Humanist or Transitional Body Text
You don’t always need to rely on blowing your headline up to large size to make an impact. Display or Headline fonts are specially designed to make text really shout for attention. These heavily stylised or chunky display fonts, such as FF Scala and Eczar, look fantastic paired with Humanist or Transitional body text, whether in serif or sans serif styles.
If you’re putting together a more design-forward layout which needs to grab a viewer’s attention, such as a poster or magazine cover, this font pairing won’t fail to turn heads, and it looks super-stylish too.
Here a headline set in Scala Sans Black is the perfect foil to the simple charms of Gentium Basic.
5. Round Sans Serif Headline + Old-Style Serif Body Text
Rounded fonts are youthful, and used alone give an almost childlike quality to a design. Pairing a rounded sans serif headline, like Woodford Bourne or Quicksand with more traditional serif body text exaggerates further the contrast that we looked at with the serif/sans serif font pairing at the start of the article.
This is a more space-age version of that pairing rule, giving layouts a futuristic spin that feels clean and cutting-edge. In this example the exaggerated tracking of Quicksand as the headline makes the ultimate contrast with neat and pulled-together Garamond.