Type is the voice of a website — visitors hear it before they read a word. A confident pairing makes even plain copy feel considered; a careless one undermines the best layout. These four pairings have survived my client work again and again.
Grotesque + neutral sans
A heavy grotesque for headlines with a quiet neutral sans for body copy is the workhorse of modern brand sites. The headlines carry personality and weight; the body stays invisible and readable at small sizes. Keep headline tracking tight and body line-height generous, and the combination rarely fails.
Serif display + clean sans
When a brand needs warmth — hospitality, editorial, craft — a characterful serif for display sizes paired with a clean sans for everything functional strikes the balance. Reserve the serif for short lines; long serif paragraphs tire readers on screens.
Two families are enough. A third font is a committee, not a pairing.
Mono accents + anything
A monospace face used sparingly — for labels, captions, prices or code — adds a technical, honest texture to almost any pairing. The trick is restraint: set it small, often uppercase, with wide tracking, and never for paragraphs.
The rules that make pairings work
Contrast the roles clearly: if headlines and body look similar in weight and size, the hierarchy collapses. Limit yourself to three weights total, size body copy at 16px minimum, and check the pairing on a real phone before you commit — type that sings on a 27-inch monitor often mumbles at 375 pixels.
Pick one pairing, apply it ruthlessly, and your whole site will feel designed — even the pages you haven't redesigned yet.
