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

Gotham with Source Serif 4

Preview uses Montserrat, 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 Montserrat, 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=Montserrat:wght@400;700&family=Source+Serif+4:wght@400;700&display=swap">

CSS

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Source Serif 4', serif;
}

Tailwind v4

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

@theme {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Source Serif 4', serif;
}

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

About Gotham

Wide geometric capitals taken from New York building signs.

History

Tobias Frere-Jones designed Gotham with Jesse Ragan at Hoefler & Frere-Jones. It was designed in 2000 and released in 2002.[1]
GQ magazine commissioned it, asking for a geometric structure.[1]
It is based on mid-century New York architectural lettering, such as the sign on the Port Authority Bus Terminal's Eighth Avenue front.[1]

Who uses it

Barack Obama's 2008 presidential campaign signs and posters[1]
The One World Trade Center cornerstone (2004)[1]
The 2010 United States census[1]
Netflix, until 2018[1]

Sources

1. Wikipedia: Gotham (typeface)

Gotham on its own page