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 suggests 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 favorite 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.font pairing beginner’s typography font families typeface sans serif, Bebas Neue, and Caslon.

2. Headline + Body Text Fonts from the Same Font Family

Most fonts belong to a typeface family—a group of fonts that vary in weight (e.g. bold, italic, book, etc.) but ultimately have the same base design. A family may also include more stylized 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 that require a more traditional, formal, or conservative style, this sort of font pairing is a 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.font pairing beginner’s typography font families typeface sans serif Roboto.

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 shares 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.font pairing beginners typography font families typeface sans serif serif

Transitional serifs have a more modern mood than Old Style typefaces, which making 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.font pairing beginner’s typography font families typeface sans serif.

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.font pairing beginners typography font families typeface sans serif serif

4. Display Headline + Humanist or Transitional Body Text

You don’t always need to rely on blowing your headline up to a large size to make an impact. Display or Headline fonts are specially designed to make the text really shout for attention. These heavily stylized 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 that 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.font pairing beginners typography font families typeface sans serif

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 headlines, 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.font pairing beginners typography font families typeface sans serif serif