Before reading a single word, your brain has already formed an opinion about a piece of text. Not about its content — about its texture. In a fraction of a second, the eye evaluates the overall visual mass: does this feel dense or airy, coherent or cluttered, inviting or off-putting? Typographers call this typographic grey — and it's one of the least-taught, most useful concepts in visual design.
Everything that follows flows from it: the choice of typefaces, how they're paired, the way they structure information, and why some interfaces feel immediately professional while others trigger a vague discomfort you can't quite name.
The two-font rule — and why it's a rule, not a suggestion
The standard recommendation is to stick to two typefaces per project. Not out of conservatism, but because each typeface introduces its own visual world, its own rhythm, its own personality. Beyond two, these worlds compete rather than reinforce each other, and overall coherence begins to unravel.
In practice, two well-chosen fonts already offer a considerable palette: weight variations (light, regular, medium, bold, black), styles (roman, italic), case (lowercase, small caps, uppercase) and size represent dozens of possible combinations. Designers who stack four or five different typefaces are usually trying to compensate for a poorly thought-out hierarchy — and it shows.
There's also a third option that's often underestimated: use a single typeface across the board, explored through all its axes. Inter Regular for body text, Inter Bold for headings, Inter Medium for labels — sober, coherent, and often more elegant than a failed marriage between two fonts that have nothing to say to each other.
The contrast principle: not too close, not too far apart
The most common mistake beginners make isn't pairing two fonts that are too different — it's pairing two that are too similar. Two slightly different sans-serifs side by side produce a kind of typographic unease: the eye senses an inconsistency without being able to identify it. It's like two shades of beige that don't quite match — technically close, visually discordant.
The guiding principle is contrast through difference in kind: a serif paired with a sans-serif, a high-character font accompanied by a neutral, restrained one, a historical family offset by a contemporary one. These oppositions work because they create a legible tension — the eye immediately understands that these two fonts are playing different roles.
Some pairings that work well in 2026:
Playfair Display + Inter — the editorial combination par excellence. Playfair for headings: elegant, high-contrast, slightly dramatic. Inter for body text: neutral, legible at every size, optimised for screen. The classic bet for an online publication that takes itself seriously.
Fraunces + Source Sans 3 — Fraunces is an optical "wonky" typeface designed for emotional headlines, with slightly irregular forms that evoke craft and artisanship. Source Sans 3 is one of Adobe's most stable sans-serif families. The tension between the two is immediate and effective.
Syne + DM Sans — startup and contemporary design system territory. Syne has a slightly distorted geometry that gives it a strong character without aggression. DM Sans is clean, modern, infinitely adaptable.
One typeface across the entire range — SF Pro at Apple, Segoe UI at Microsoft, Roboto at Google. Operating systems themselves have often made the call: one family, mastered to perfection, beats two poorly matched typefaces every time.
What not to do — with concrete examples
Two high-character fonts together. Bebas Neue and Abril Fatface in the same document: each works brilliantly on its own. Together, they cancel each other out. Each demands attention — neither quite gets it. The unwritten rule: in a pairing, one font dominates, the other serves.
Decorative fonts for body text. Scripts, casual faces, blackletter — beautiful at large sizes, illegible at 14px on mobile after three lines. This isn't just an aesthetic issue: it's an accessibility one. Dyslexic users, people with low vision, or simply anyone in a hurry will give up before the end of the first sentence.
Fonts too quiet for headings. A heading in Regular 18px in a thin typeface doesn't draw the eye — it drowns in the surrounding mass. A heading needs to be immediately recognisable as a heading. If the user has to guess the hierarchy, the hierarchy doesn't exist.
Typographic grey and the squint test
Here's a technique typographers have used for centuries that developers almost universally ignore: squint slightly at your text. You get a blurred image that erases the words and leaves only the texture. What you see in that moment is the typographic grey of your composition — its visual density, its balance, its voids and masses.
A homogeneous block of text produces an even, regular grey without incidents. A problematic block reveals, by contrast, areas of excessive whitespace, alternating densities, and irregularities that create reading friction before the eye has deciphered a single word.
The squint test immediately reveals three types of problem:
Rivers — those corridors of white that form vertically in justified text, when inter-word spaces accidentally align across several consecutive lines. They're perfectly visible with the squint test, barely noticeable during normal reading. In web typography, they appear frequently with text-align: justify without proper word-break management (hyphens: auto in CSS). They disrupt reading by creating unintended visual escape routes.
Excessive airiness — too much line height, poorly calibrated paragraphs, inconsistent internal margins. The text floats in a void that strips it of density and authority.
Blocks that are too dense — the opposite extreme: insufficient line height, characters set too tightly, paragraphs without breathing room. The eye tires before it's even begun.
The recommended line height for body text sits between 1.4 and 1.6 times the font size. For a 16px font, that means a line height between 22 and 26px. Below that, it suffocates. Above, it drifts.
Typographic hierarchy: guide without explaining
Studies on reading patterns — notably Nielsen Norman Group's research on the F-pattern — show that most users don't read text linearly. They scan first, looking for anchor points: headings, paragraph openings, bolded elements, lists. Only after building a mental map of the content do they decide to read in detail.
Typographic hierarchy is precisely this system of signals. It isn't built with a single variable — size — but with a combination: size, weight, colour, line height, spacing before and after, and sometimes typeface. Each level of the hierarchy (H1, H2, H3, body, caption, footnote) must be immediately distinguishable from the others, without ambiguity.
Consistency matters as much as distinction. If your H2 is Inter Bold 22px in the first section, it must be Inter Bold 22px in every section. A hierarchy that varies across pages, sections or moods isn't a hierarchy — it's noise.
One last point that's often overlooked: capitalisation is not a reliable hierarchy variable. An ALL-CAPS heading may feel visually powerful, but it's slower to read (the eye relies on the ascending and descending shapes of lowercase letters to recognise words), and in the digital era it's often perceived as aggressive or shouting. Small caps (font-variant: small-caps) are a more elegant alternative when you want that effect without the aggression.
In summary: what the eye knows before the brain
Typography in practice isn't a checklist to tick off — it's a discipline of perception. Before your user reads your content, their brain has already assessed whether the text is worth reading. That assessment is visual, instinctive, and near-instantaneous.
Two well-contrasted fonts, a clear hierarchy, balanced typographic grey, no rivers — these choices are invisible when they're done well. They're glaring when they're not. And that's precisely the definition of good typographic work: invisible when it succeeds, unbearable when it doesn't.