Font pairing: the four rules, and a bench to break them on

The one principle

Two faces sit together when they share a skeleton and disagree about everything built on top of it. Skeleton means the underlying proportions: how tall the lowercase is against the capitals, how wide the round letters are, where the axis of the o points. Everything on top of the skeleton (weight, contrast, serif, width, texture) is where the difference should live.

Faces that share both skeleton and surface look like a mistake, as though one of the two failed to load. Faces that share neither look like two documents that collided. The interesting pairings sit exactly between those two failures.

Rule one: match the x-height, not the point size

Two faces set at the same point size are almost never the same visual size. The x-height is what a reader perceives as size, and it varies enormously between families. Righteous, the display face on this site, has an x-height of 75.1 % of its cap height. Kumbh Sans, the text face directly under it, sits at 66.7 %. Both figures are read out of the font files this page serves, at a 216 pixel setting.

The practical consequence: when a heading face has a much larger x-height than the text face, the heading has to be set smaller than instinct suggests, or it will overpower a page it is only supposed to introduce. Move the size slider on the bench and watch the point at which the relationship tips.

Rule two: put the difference in width and contrast

Width and stroke contrast are the two axes a reader notices immediately and consciously. Pairing a condensed display face with a normal-width text face gives an obvious, legible difference without touching the skeleton. Pairing a high-contrast face with a low-contrast one does the same thing through texture instead of shape.

What does not work is a small difference on many axes at once. Two faces that are slightly different in width, slightly different in contrast and slightly different in weight read as one face rendering badly. Make one difference large and hold the rest still.

Rule three: test at the real size, in the real amount

Every pairing looks good as two words on a white field. The test is a heading of the length headings actually reach, over the amount of body copy that will actually sit under it. The bench above defaults to a phrase long enough to wrap, for that reason.

This is also where a display face is caught. A face drawn for forty-eight point will often have joins and counters that close up entirely at eighteen, and eighteen point, not forty-eight, is where most subheadings live.

Rule four: leading and tracking belong to the pair, not to the face

Leading is set by the line length and the x-height together, not by the face on its own. A face with a large x-height fills its line more and needs more space between lines to stay open. A long measure needs more leading than a short one at the same size, because the eye has further to travel back.

Tracking works the other way round as size increases. A display face set very large almost always wants negative tracking; the same face at text size almost always wants none. That relationship is visible on the bench by moving size and tracking together and watching where the word stops looking loose and starts looking tight.

Three pairings that hold, and why

Geometric display over neutral sans

Righteous over Kumbh Sans, which is what this site uses. The skeleton is shared (both are geometric, both have wide round letters) and the disagreement is entirely in weight and personality. The x-height gap of about eight percentage points means the display face has to be set relatively small, and the proportions of every heading on this site were chosen against that constraint.

High-contrast serif over humanist sans

The classic editorial pairing. The serif carries the voice, the sans carries the reading, and the contrast difference is large enough that no reader ever confuses the two roles. It fails when the serif is set below the size its hairlines survive.

One family, two widths

The least fashionable answer and frequently the best one. A family with a genuine condensed axis gives a heading and a text setting that cannot clash, because they are the same drawing. It costs one font file instead of two, which on a page measured for speed is not a small consideration.

When a pairing is wrong

Three symptoms, all visible on the bench. The heading and the body look like the same size even though they are not: the x-heights are too close. The page feels busy at a glance but nothing stands out: the differences are spread across too many axes. The heading looks like it belongs to a different document: the skeletons disagree, usually in the width of the round letters.

The fix for all three is the same: take away one of the differences and make another one larger.