Understanding font pairing
Two voices, in conversation.
What "pair well" actually means in typography, the three rules that almost always work, and the variable-font escape hatch.
Contrast is the goal.
A good font pair gives the reader two clearly different voices — usually one for headings, one for body. Same voice twice (Helvetica and Arial together) is flat. Voices that conflict (a humanist serif next to a geometric grotesk screaming for attention) is loud. The sweet spot is "different enough to be distinguishable, similar enough to feel like the same design".
Three rules that nearly always work.
1. Pair a serif with a sans-serif. The classic editorial move — Playfair Display + Source Sans Pro, EB Garamond + Inter. 2. Pair within the same superfamily. Source Serif + Source Sans + Source Code are designed together; using any two can't fail. 3. Pair one display face (only for headlines) with a workhorse body face. The display can be eccentric; the body must be invisible at reading sizes.
What "x-height" means and why it matters.
The x-height is the height of lowercase letters with no ascenders or descenders. Two fonts at the same point size can have x-heights that differ by 30 %, making one look much larger than the other on the page. For pairs to read consistently, either pick fonts with similar x-heights, or compensate (a font with a small x-height at 18pt might look the same size as a font with a large x-height at 15pt). The visual size is what readers see, not the numeric size.
A worked pair.
Editorial blog: Playfair Display 700 for h1/h2 (high-contrast, classical serif, dramatic at large sizes), Source Sans Pro 400 for body and small UI (humanist sans, designed to read at 16-18px). The pair is on every well- designed publication blog template because it works: the serif has personality for headlines, the sans disappears for reading. The reader notices the headline and reads the body; that's the entire job.
Editorial pair
Playfair Display + Source Sans Pro
High-contrast serif for headings; humanist sans for body.
h1: Playfair 700 ; body: Source Sans 400
= Classic editorial register
Within-superfamily pair
IBM Plex Serif + IBM Plex Sans
Designed together, guaranteed to harmonise.
h1: Plex Serif 600 ; body: Plex Sans 400
= Coherent technical-doc register
Variable fonts as one-font pairs.
A variable font carries multiple weights, widths, and optical sizes inside one file. You can pair "Inter at 700 weight, 16em width" with "Inter at 400 weight, 18em width" and get two clearly distinct voices from a single font asset. The download is one file; the visual variety is several. For projects that want typographic richness without the bandwidth cost of multiple fonts, variable fonts are the contemporary answer.
Avoid two fonts in the same body of text.
The rule isn't "two fonts maximum per page". It's "two fonts maximum in one flow of reading". A long article uses one body font and one heading font — mixing two body fonts within a paragraph (or even within a section) gives the reader nothing useful and adds visual cost. Reserve the second font for a different register (footer text, captions, code snippets) where the change of context is clear.