Font Pairing Guide

The contrast principle

Why opposites attract in typography

The most reliable font pairing strategy is contrast. When two fonts are too similar, they create visual confusion — the reader's eye cannot distinguish heading from body, important from supporting.

Effective contrast operates across several axes: structure (geometric vs humanist), stroke modulation (high-contrast serifs vs monolinear sans), historical era (classical vs contemporary), and overall weight. You don't need to vary all four — varying even one axis clearly is enough to create a successful pair.

The classic example: a high-contrast old-style serif like Garamond paired with a monolinear geometric sans like Futura. Completely different letterform DNA, but they share similar optical size and proportions. The contrast is intentional and the harmony is evident.

The shared trait rule

What holds a pairing together

Contrast without any commonality produces chaos, not sophistication. Every successful font pair shares at least one characteristic: x-height, cap height, optical weight, general proportions, or cultural/historical origin.

Playfair Display and DM Sans, for example, are formally very different — one is a high-contrast transitional serif, the other a geometric sans-serif. But they share a similar x-height and optical weight at text sizes, which is why they work well together on screen.

When evaluating a potential pair, set a line of each font at the same size. Do the lowercase letters feel like they belong to the same page? If yes, you likely have a viable pair.

Display font vs body font

Understanding the fundamental roles

A display font is designed for large sizes — headlines, pull quotes, hero text. It prioritises visual impact, distinctive character, and brand personality. At large sizes, tight spacing and high contrast are assets.

A body font is designed for extended reading at small sizes. It prioritises legibility, even colour, and comfortable rhythm over long paragraphs. At 14–18px, excessive contrast or quirky letterforms become liabilities.

Never use a display font for body copy. The features that make it striking at 72px — extreme stroke contrast, tightly-fit letters, unusual terminals — become tiring and illegible at 16px. The reverse works occasionally: a clean, neutral body font can serve as a subdued display face when set in uppercase with generous letter-spacing.

Typography hierarchy for the web

Creating a clear reading structure

Typographic hierarchy guides the reader through content in order of importance. On the web, you typically work with three or four levels: H1 (page title), H2 (section heading), H3 (sub-section), and body text.

The most important tool for hierarchy is size — each level should be meaningfully smaller than the one above. A common ratio is 1.25× (major third) or 1.33× (perfect fourth). For a body size of 16px: body 16 → H3 20 → H2 26 → H1 34.

Weight is your second tool. Bold weights at large sizes, regular or medium at body sizes. Avoid using bold for body text — it creates visual noise and reduces the contrast that bold headlines need to stand out.

Colour and spacing complete the system. Muted colour for secondary text, generous margin-top before headings, and tight margin-bottom after them all contribute to scannable, readable layouts.

Choosing Google Fonts for your website

Practical recommendations by use case

Google Fonts offers over 1,500 typefaces — the challenge is not finding fonts, but narrowing to the right pair. A useful filter: what is the tone of your project?

For editorial, publishing, and content sites: high-contrast serif displays (Playfair Display, Fraunces, Cormorant Garamond) paired with humanist or transitional sans-serifs for body (DM Sans, Karla, Source Sans 3).

For SaaS, startup, and tech products: geometric or grotesque sans-serifs for display (Syne, Archivo Black, Bricolage Grotesque) with clean, neutral body fonts (Plus Jakarta Sans, Figtree, IBM Plex Sans).

For luxury, fashion, and branding: refined, low-x-height serifs (Cormorant Garamond, Cinzel, Rufina) with elegant, spaced body typefaces (Raleway, Josefin Sans, Cardo).

Use our font pairing tool to test any combination on real layouts before committing to a font stack.