EN

Font pairing – heading and body font combinations

Font pairing made easy: pick a font pair and instantly see how heading and body text work together – with your own text if you like. Every pair uses pre-installed system fonts only: nothing to download, no request to Google or any other server. Each pair comes with the reasoning, the measured x-height and availability per operating system.

Source: Microsoft Learn – Font List Windows 11 (as of 21 Apr 2022, retrieved 27 Sep 2026). Updated: .

px
The heading is shown 1.8 times larger.
My ToolboxYour inputs are saved in this browser only.

Preview

The art of a good headline

Good typography goes unnoticed. It guides the eye calmly through the text, sets a clear hierarchy and lets the content speak – on a phone just as much as on a large monitor.

Your text stays in this browser window – it is not stored, not sent and not added to the address bar.

CSS to copy

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

All font pairs

Result

Font pair
Georgia + Verdana
Why it works
Classic serif/sans-serif contrast: Georgia for headings, Verdana for body text. Matthew Carter designed both for the screen, so their proportions and rhythm match. Verdana has a very large x-height and runs wide – set body text about 1 px smaller.
x-height (measured)
Georgia: 0.481 em · Verdana: 0.545 em – body text looks about 13% larger at the same font size
Availability by operating system
SystemHeadingBody text
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto Serif (fallback)Roboto (fallback)

How it is calculated

How to pair fonts

Two fonts work together when they are clearly different but similarly built. The safest route is contrasting a serif with a sans-serif: one carries the headings, the other the body text. Two similar serifs or two similar sans-serifs, on the other hand, easily look like a mistake.

How to pair fonts

  1. Choose a font pair from the list, e.g. Georgia + Verdana.
  2. Set the body font size (12–28 px) and try your own text in the preview if you like.
  3. Check the reasoning, x-height and availability per operating system, then copy the CSS.

Example: Georgia + Verdana with 18 px body text: the heading is shown 1.8 times as large, i.e. 1.8 × 18 = 32.4 px. The x-height is 0.481 em (Georgia) and 0.545 em (Verdana) – so the body text looks about 13% larger at the same font size.

Just as important is the x-height – the height of lowercase letters relative to the font size. Fonts with a large x-height (Verdana: 0.545 em) look noticeably bigger at the same size than fonts with a small one (Calibri: 0.464 em). If a pair’s x-heights are far apart, balance them with the font size. The values shown come from the OS/2 table of the Windows 11 font files.

Why system fonts only?

System fonts are already installed on the device: pages load faster, text does not jump while loading, and no request goes to a third-party server. Loading web fonts straight from a font CDN sends every visitor’s IP address to that provider – a privacy issue under the GDPR in Europe. If you want custom web fonts, host them yourself.

Font stacks: why several names?

No font is installed on every system. That is why CSS lists several fonts in a row (a font stack): the browser uses the first one that is installed, and a generic family such as serif or sans-serif catches everything else. The table shows which font actually appears on Windows, macOS, iPhone/iPad and Android – based on Microsoft’s and Apple’s font lists and Android’s font configuration (accessed 27 Sep 2026). Android has no Georgia or Verdana and shows Noto Serif or Roboto instead; Linux distributions ship different fonts depending on the installation.

Tips for readable body text

More web design tools: pick colors with the color palette generator, convert color values with the color converter and design backgrounds with the CSS gradient generator.

Frequently asked questions

Which fonts go well together?

Pairs of a serif and a sans-serif are a safe bet, such as Georgia with Verdana, Palatino with the system UI font, or Cambria with Calibri. What matters is clear contrast and similar x-heights.

How many fonts should a website use?

Two at most: one for headings, one for text. Add a third, such as a monospace font for code, only if it has a job of its own.

Are Georgia and Verdana available on every device?

On Windows, macOS and iOS, yes. Android does not ship them and shows Noto Serif or Roboto – which is why every font stack should end with a generic family like serif or sans-serif.

What is x-height?

The height of a lowercase x relative to the font size. A large x-height makes text more legible at the same size but needs a little more line spacing.

Why not just use web fonts from a CDN?

Every page view then sends the visitor’s IP address to the font provider and adds a download before text appears. System fonts avoid both; custom fonts can be self-hosted.

Is my preview text saved?

No. Your own headings and text stay in this browser window only. Just the selected pair and font size are remembered.

Sources and legal basis

As of: · Editorial policy

Related tools