Choosing a Display Font Without Wrecking Readability

The landing page launched and looked wonderful: a high-contrast display face in the hero, full of personality at 64 pixels. Six weeks later the same face is on the settings screen at 13 pixels — strokes thinned to threads, the tight letterfit clotted into smudges, every label carrying flourish nobody asked for at that size. No one decided this. The font leaked downward, one “just to be consistent” at a time, because nothing marked where it stopped being welcome.

A display font is a face drawn for large sizes — higher contrast between thick and thin strokes, tighter default spacing, more personality in the letterforms — and each of those design choices works against it at small sizes. The working rule: a display face gets roughly the top two or three steps of the type scale and nothing below; a workhorse body face carries everything else. This article is part of our typography guide.

What makes a typeface a display font?

The intended size. A display typeface is drawn to be seen large — headlines, posters, heroes — and it trades small-size robustness for large-size character. The trade shows up in three concrete design choices:

• Higher stroke contrast. Thick stems against hairline thins — dramatic at 60px, where a hairline is still several pixels wide.
• Tighter default spacing. Large text needs less air between letters, so display faces are fitted close.
• More personality in the letterforms. Details, quirks and flourishes that reward the close look a headline invites.

All three are virtues in their habitat. All three become liabilities the moment the face is asked to do a different job.

Why do display fonts fail at small sizes?

Because reading changes with size. At display size, the eye treats letterforms as shapes — it lingers, notices the detail, enjoys it. At body size, the eye reads word-shapes: whole-word silhouettes recognized at speed, dozens per second. Detail that rewarded the lingering eye becomes interference for the scanning one.

Each display trade then inverts. Hairline strokes thin toward nothing, or break up on lower-resolution screens. Tight fitting, generous at 60px, clots letter pairs into smudges at 13px. And personality becomes noise — a quirk you admired once in a headline is a quirk the reader must filter out on every line of a paragraph.

Where does a display font belong on the type scale?

At the top — roughly the top two or three steps — and nowhere else. It never touches body text, captions, or interface labels; the body face carries everything below the handoff. On the classic web scale (16px base, perfect-fourth-class ratio — the sizing math itself lives in our type scale guide), the split looks like this:

The handoff step — where display style ends and heading style begins — is the one decision worth making explicitly. A personality-heavy face usually hands off above h2; a milder one can hold it. Below the handoff there is no debate — 21px is paragraph territory, and paragraph territory belongs to the workhorse.

See a display face over a workhorse body across the whole scale — a personality-heavy heading face over an Inter-class body, every step shown in specimen text at its real size. Slide your eye down the specimen and find the step where the display face stops being a pleasure; that is your handoff.

What does a display font demand from the body face?

Neutrality — in proportion to its own volume. The more personality the display face has, the more neutral the body face must be: one voice speaks, one carries. That division of labor is worth stating explicitly, because it is the entire logic of font pairing. Two expressive faces compete, and a page that competes with itself reads as louder and less confident than either face alone. The quiet workhorses — Inter-class, Source Sans-class — exist precisely for this job, and choosing one is not a failure of imagination; it is what makes the imaginative choice up top affordable.

How do you stress-test a display font before committing?

Set it at body size and watch it fail. Genuinely — put a full paragraph of real product text in the candidate face at 16px and read it. You should see the failure modes arrive on schedule: thins struggling, pairs clotting, the texture tiring by the third line. That failure is a passing grade — it confirms the face is what it claims to be, and that your handoff rule is load-bearing.

If it survives — if the paragraph reads comfortably — you haven’t found a display face at all. You’ve found a workhorse with range, which is worth knowing before you commit: it may mean you need only one family, with weight and size doing the work two faces would have done.

How many display fonts should you use?

One. A display face earns its keep by being the identity note — the thing a reader remembers the page by — and identity notes don’t share. A second display face doesn’t add expressiveness; it splits recognition between two voices and halves both. The exceptions are art-direction projects — a magazine feature, a campaign — where variety is the point; in product and brand typography, one display face over one body face covers nearly every need.

Watch it fail on purpose

Set the display candidate at body size — and read a full paragraph of it. If it clots and tires, commit with confidence and mark the handoff step in your scale. If it reads fine, reconsider the premise: you may be one family away from a simpler system.