Open menu

Font Pairing Tool

Find a heading and body font combination that works, using system font stacks that are already installed on your visitors' devices, so nothing downloads and the page never shifts while fonts load. Choose from 13 stacks (humanist, geometric and neo-grotesque sans, transitional, old-style, didone and slab serifs, monospace, rounded, industrial and handwritten), each with similar web fonts named for when you self-host. Tune weight, size, line height and line length, and check readability before exporting.

Preset gallery

The art of a quiet morning

Didone serif + Humanist sans

Good typography is invisible: it lets the words do the work. A clear heading sets the tone, and a comfortable body face carries the reader from one line to the next without effort.

Pairing with contrast

Combine faces that differ in structure but share proportions, for example a high-contrast serif for headings with a calm sans-serif for text.

Accessibility checks

  • Pass 17px body text is comfortable to read.
  • Pass A line height of 1.6 gives paragraphs room to breathe (WCAG 1.4.12 recommends supporting 1.5).
  • Pass 66 characters per line is a comfortable line length.
  • Pass The heading and body fonts differ enough to create a clear hierarchy.

Export code

/* Heading: Didone serif (similar web fonts: Playfair Display, Bodoni Moda)
   Body: Humanist sans (similar web fonts: Source Sans 3, Open Sans)
   System font stacks: nothing to download, no layout shift. */
:root {
  --font-heading: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
  --font-body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #1F2937;
}

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

h1 { font-size: 41px; }
h2 { font-size: 30px; }

p {
  max-width: 66ch;
}
Favourites on this device (0)

No favourites yet.

Fonts
Size & rhythm
Text color
Background

How to use the font pairing tool

  1. Start from a pairing: editorial, classic news, literary, startup, clean UI, friendly, developer and more.
  2. Choose the heading and body stacks. Each option shows web fonts with a similar feel.
  3. Set the heading weight and the size ratio between headings and body text.
  4. Tune the rhythm: body size, line height and line length.
  5. Set colors for the preview, then export CSS or Tailwind.

How font stacks work

A font stack lists fonts in order of preference. The browser uses the first one installed on the device. A good stack lists fonts with similar shapes across macOS, Windows, Android and Linux, and ends with a generic family such as serif or sans-serif, so every visitor gets a close match.

Worked examples

Example 1: an online magazine

Load Editorial: a high-contrast didone serif for headlines with a humanist sans for body text. The contrast gives articles a print-like elegance while keeping long text easy on screens.

Example 2: a SaaS dashboard

Load Clean UI: a neo-grotesque heading with the system UI font for everything else. It looks native on every platform and keeps interfaces compact and familiar.

Example 3: a cosy recipe blog

Load Warm reading: an old-style serif pairing at 19px with a 1.75 line height on a warm off-white background, ideal for long, relaxed reading.

Common mistakes

  • Too many fonts. Two families (heading and body) are plenty; use weight and size for hierarchy.
  • Light weights for body text. Thin fonts lose contrast; stay at regular (400) or above.
  • Fixed line height in pixels. Unitless values like 1.6 scale with the font size.

Testing a pairing

Before you commit, set a real page in the pairing: a headline, an intro paragraph, a list and a form. Check the pair at small sizes on a phone and in bold and italic. If the fonts look too similar, the hierarchy disappears; if they clash, increase the size contrast or choose fonts with similar proportions. Loading only the weights you actually use keeps pages fast, so note which weights each role needs.

Frequently asked questions

Why system font stacks instead of web fonts?

They load instantly, never cause layout shift or invisible text, and cost no bandwidth. Modern operating systems ship high-quality fonts, so a well-built stack looks deliberate. Each stack lists similar web fonts if you prefer to self-host a specific typeface later.

What makes a good font pair?

Contrast with harmony: fonts that differ clearly in structure (for example a serif heading and a sans-serif body) but share similar proportions. Two very similar fonts look like a mistake; the checker warns when both come from the same family type.

What line height and size should body text use?

At least 16px for body text and a line height of 1.5 or more. WCAG 1.4.12 requires that text still works when people increase line height to 1.5, so designing with it from the start helps everyone.

How long should lines be?

Around 45–80 characters per line is comfortable to read. The export sets max-width in ch units on paragraphs.

Can I use web fonts like Google Fonts instead?

Yes. The CSS export names similar web fonts for each pair in a comment. Load the ones you want and put them at the start of the font stack, keeping the system fonts as a fallback.

Sources