Font pairing – heading and body font combinations

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.

Font pair

Body font size

The heading is shown 1.8 times larger.

Your 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 own heading (optional)Your own body text (optional)

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: System Heading Body text
Windows 10/11 Georgia Verdana
macOS Georgia Verdana
iPhone/iPad Georgia Verdana
Android Noto Serif (fallback) Roboto (fallback)

System	Heading	Body text
Windows 10/11	Georgia	Verdana
macOS	Georgia	Verdana
iPhone/iPad	Georgia	Verdana
Android	Noto 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.

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

Set on-screen body text at 16 px or more, ideally 17–20 px, with a line height of about 1.5 to 1.7.
Make headings clearly larger (1.6 to 2 times) and bolder than the text – then even a single font family is enough.
Keep lines to roughly 60 to 80 characters.
Check colour contrast: grey text on white quickly gets too faint – use the color contrast checker.

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: 27 September 2026