How to pair fonts (without overthinking it)

Give each font a job

Most pairing advice starts with taste. Start with roles instead. A pairing works when each typeface has a clear job and neither tries to do the other’s.

• Body. It does the most sustained work, so choose it first. Test a full paragraph at the size your readers will see. You want even texture, open letterforms, a real italic and at least two weights.
• Headings. This is where tone lives. A heading face can be sharper, heavier, narrower or more decorative than anything you would read for ten minutes.
• Interface and data. Buttons, labels, tables and code. Often this is the body face again. Sometimes it is a monospace.

Two expressive display faces compete even when each looks beautiful on its own. If both fonts are shouting, neither is heard. One voice with character and one quiet workhorse is the arrangement that almost always holds up.

Look for one useful contrast

The rule behind nearly every good pairing: contrast in one dimension, harmony in the others. A difference should look intentional. Two faces that are almost the same look like a mistake, as if the wrong font loaded. Two faces that differ in every way look like two different websites.

A quick test: put the lowercase a, g, e and n of both fonts side by side at the same size. If the round letters have a similar shape and the lowercase heights roughly match, the families share a skeleton and will usually get along, however different their details are.

One family may be enough

If two faces seem almost identical, drop one. A single family with different weights often creates a more coherent result, with fewer files to load. Size, weight, color and space can carry a whole hierarchy.

The next step up is a superfamily: a serif, a sans and sometimes a mono drawn together with shared proportions. The harmony is built in, so you only supply the contrast. These are all open source and available on Google Fonts:

• IBM Plex: IBM Plex Sans, IBM Plex Serif and IBM Plex Mono.
• Source: Source Sans 3, Source Serif 4 and Source Code Pro.
• Roboto: Roboto, Roboto Slab, Roboto Serif and Roboto Mono.
• Noto: Noto Sans and Noto Serif, with coverage for a very wide range of scripts. A strong choice when your site is multilingual.

Safe pairing patterns, with examples

These patterns are dependable starting points. Every family named here is open source and on Google Fonts, so you can try them today and use them commercially.

Test a real page, not two big letters

A pair of giant Aa specimens is a starting point, not a decision. Pairings succeed or fail in running text, at real sizes, on real screens.

1. Set a heading, a short introduction, a long paragraph, a link, a button and a caption. Use your own content, not placeholder Latin.
2. Include numbers, punctuation and quotation marks. If your site is multilingual, include every language. A typeface that looks elegant in a short English title may have no glyphs for your other languages.
3. Shrink the viewport and look at where headings wrap. Wide display faces can break awkwardly on a phone.
4. Check bold and italic inside the body text. If the family has no true italic, the browser fakes one by slanting the regular, and it shows.
5. Look at it on a second device. Rendering differs between Windows, macOS and phones, especially for light weights.

The font pairing playground lets you explore the relationship between heading and paragraph styles with families available on your device. Once the relationship works, test your final web fonts in the product itself. Keep fallback behavior in mind: a font installed on your machine may not be installed on someone else’s, as we explain in CSS font stacks and fallbacks.

What a pairing costs, and the CSS for it

Every family, weight and style is a separate file unless you use a variable font. Two families with regular, italic and bold each already means six downloads. That is the practical argument for restraint: a disciplined pairing is also a faster page.

• Load only the weights you use. Remove the ones left over from earlier experiments.
• Use WOFF2. If you need many weights of one family, a variable font can replace several files with one.
• Set font-display: swap or optional so text is readable while fonts load.
• Give each family a fallback of the same kind: a serif behind a serif, a sans behind a sans.

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

:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
}

Study pairings on sites you admire

The fastest way to build judgment is to look at pairings that already work in production. Pick a site whose typography you like and find out exactly what it uses.

The manual way

1. Right-click a heading, choose Inspect, open the Computed tab and scroll to Rendered Fonts at the bottom. Note the family, then note font-size, font-weight and line-height.
2. Repeat for a body paragraph, a button and a caption.
3. In Firefox, the Fonts tab of the Inspector has a section listing all fonts on the page, which saves some clicking.

It works, but you inspect one element at a time and keep the notes yourself. The full walkthrough is in how to identify fonts on a website.

With Font Inspector

Open Fonts on this page. You get every family on the page ranked by share of text, with its weights and sizes. The ranking tells you the roles straight away: the family with the largest share is the body face, and the one with a small share and large sizes is the display face. Hover a family to outline where it is used on the page.

Save the families to your library, then use Compare to set up to four of them side by side with the same sample text. This is where the contrast dimensions from the table above become visible. Over time the library turns into a personal reference of pairings, which you can group into collections and view by site.

Finding a font does not license it. Before you adopt a pairing you discovered, check where each family comes from and what it costs. We cover that in font licensing explained.