Font pairing

Pick a heading font, pick a body font that goes with it, and see the pair on a poster, an app screen and a logo. Every preview uses a free Google Font, so you can use what you see.

13 well-known fontsPreviewed with free Google Fonts
See the pairOn a poster, an app screen and a logo
Code to pasteHTML link, CSS and Tailwind v4
Where it came fromHistory and who uses it, sourced

Heading font

Garamond with EB Garamond

Preview uses EB Garamond, the closest free match.

Some roads only go one way.

The Long Way Home

Two brothers, one borrowed car and a thousand miles of coast between them and the funeral. In cinemas this spring.

TitleTaglineBody text

Body font

Pairings for EB Garamond, and why they work.

Use it

Both fonts are free under the licences on Google Fonts. Add the link to your page head, then set the families in CSS or in a Tailwind v4 theme.

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap">

CSS

h1, h2, h3 {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
}

body {
  font-family: 'EB Garamond', serif;
}

Tailwind v4

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap");
@import "tailwindcss";

@theme {
  --font-heading: 'EB Garamond', serif;
  --font-body: 'EB Garamond', serif;
}

/* Then use the font-heading and font-body classes. */

About Garamond

Sixteenth century Paris type, revived many times since.

History

Claude Garamond was a punchcutter in Paris who died in 1561. The first clear record of his work is from 1540.[1]
EB Garamond, by Georg Duffner and later Octavio Pardo, was released in 2011 under the Open Font License. It follows a 1592 specimen of Garamond’s type.[1]

Who uses it

Apple Garamond, a condensed ITC Garamond, adopted by Apple in 1984 with the Macintosh and replaced by Myriad from 2002[1]
The Guardian, which for many years set "The" in its masthead in italic Garamond[1]
O’Reilly Media, which used ITC Garamond[1]

Sources

1. Wikipedia: Garamond

Garamond on its own page