Display Fonts vs. Text Fonts: Knowing When to Use Each

You find a gorgeous typeface on a foundry's specimen page. The hero shows it at 120 pixels, tightly spaced, with hairline serifs that look like they were cut with a scalpel. You set your whole blog in it, and at 17 pixels the paragraphs turn into a shimmering grey mess where the thin strokes vanish and the letters crowd each other. The font wasn't bad. It was a display font, and you used it as a text font.

This article explains the difference between display fonts and text fonts, the specific design traits that separate them, how to tell which one you're looking at, and practical rules for using each on websites, including how optical sizing and variable fonts blur the line.

What Are Display Fonts and Text Fonts?

A text font (also called a body font or book face) is designed to be read in long runs at small sizes, typically 12–20 pixels on screen. Its job is to disappear: the reader should absorb words without noticing letterforms.

A display font is designed to be seen at large sizes, typically 24 pixels and up, for headlines, logos, posters, hero sections, and signage. Its job is to be noticed and to set a tone in a few words.

The distinction isn't about style. There are serif, sans-serif, and slab serif fonts in both categories. It's about the intended size range, which drives dozens of small design decisions.

How They're Designed Differently

Type designers tune proportions for the size at which a font will be read. At small sizes, the eye needs more help: bigger interior spaces, sturdier strokes, looser spacing. At large sizes, those same traits look clumsy and loose.

Trait	Text fonts	Display fonts
Stroke contrast	Low to moderate; thin strokes stay visible	Often high; hairlines can be very thin
X-height	Generous, for legibility at small sizes	Varies widely; can be small or exaggerated
Letter spacing	Looser default spacing	Tighter default spacing
Counters/apertures	Open, so letters don't fill in	Can be tight or stylized
Detail	Restrained; details don't distract	Decorative details, swashes, unusual shapes
Weights	Regular, italic, bold are the core	Often heavy or extreme weights
Character set	Broad, with figures, punctuation, accents	Sometimes limited to basic Latin

A few of these deserve a closer look.

Stroke Contrast

Contrast is the difference between thick and thin strokes. A high-contrast Didone like Bodoni or Playfair Display has hairlines that may render at less than one device pixel at 16px. On a standard-density screen, those hairlines anti-alias into faint grey smudges, and the text loses its shape. Text fonts like Source Serif or Merriweather keep their thin strokes thick enough to survive.

Spacing

Display fonts are spaced tightly because large letters look like they're drifting apart. Text fonts are spaced more generously because small letters need breathing room to be recognized. This is why a text font set at 72px often needs negative tracking, while a display font set at 16px feels cramped no matter what you do.

X-Height and Apertures

Text fonts usually have a relatively large x-height and open apertures, so letters like a, e, c, and s stay distinct at small sizes. Display fonts can afford quirky proportions because the reader sees them large and reads only a few words.

How to Tell Which One You're Looking At

Foundries don't always label fonts clearly, but there are reliable clues:

1. The name. Look for "Display," "Headline," "Poster," "Deck," "Banner," "Titling," or "Hero" for display cuts, and "Text," "Book," "Body," "Caption," or "Micro" for text cuts. Many families ship both: Inter and Inter Display, Playfair and Playfair Display, Source Serif 4 with optical sizes.
2. The specimen. If every sample on the foundry page is huge, it's probably display. Text fonts are shown with paragraphs.
3. The weight range. A family with only Black, Extra Bold, and Bold is almost certainly display. A family with Regular, Italic, Bold, and Bold Italic as its core is text.
4. The test. Set a 200-word paragraph at 16px and 1.5 line height and read it on a regular, non-retina monitor. If it's tiring after three lines, it's not a text font.
5. Google Fonts categories. Google Fonts uses a "Display" category for decorative and headline-only fonts, which is a useful filter, though plenty of fonts outside that category are also best kept large.

Where to Use Display Fonts on a Website

Display fonts earn their place where the text is short and large:

• Hero headlines and landing page titles.
• Section headings (h1 and h2, sometimes h3) at 28px and above.
• Pull quotes and large callouts.
• Logos and wordmarks, which are usually SVG rather than live text anyway.
• Big numbers in stats sections ("12,000+ customers").
• Campaign banners and promotional graphics.

A useful rule of thumb: if the text block has more than about 15 words, or will render below 24px on any screen size, it probably shouldn't be in a display font.

h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

/* Smaller headings switch to the text family */
h3,
h4,
h5,
h6 {
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
}

Notice that h3 and below switch families. This is a common and sensible pattern: the display face is reserved for sizes where it looks its best, and smaller headings use a bolder weight of the body font.

Where to Use Text Fonts on a Website

Text fonts handle everything that is read rather than glanced at:

• Body copy, articles, and documentation.
• Navigation, buttons, and form labels.
• Captions, footnotes, metadata, and table content.
• Small headings and subheadings.
• Anything that must remain readable at 200% zoom or on a small phone.

Text fonts can also go large, and many sites use one text family for everything. A well-made text sans like Inter or IBM Plex Sans looks good as a headline once you tighten the letter-spacing and line height.

Optical Sizes: When One Family Does Both

Historically, metal type was cut separately for each size, and a 6pt cut had different proportions from a 72pt cut of the same design. Digital type mostly lost that, but optical sizing has brought it back.

Some families ship separate optical cuts (Inter and Inter Display; Literata in multiple sizes), and many variable fonts include an opsz axis that adjusts contrast, spacing, and x-height automatically based on font size. Fraunces, Roboto Flex, Source Serif 4, Literata, and Newsreader all have optical size axes.

The browser applies optical sizing automatically for variable fonts with an opsz axis, because font-optical-sizing defaults to auto:

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

body {
  font-family: "Source Serif 4", Georgia, serif;
  /* opsz follows font-size automatically */
  font-optical-sizing: auto;
}

/* Force a more display-like cut for a hero, even at a moderate size */
.hero-title {
  font-variation-settings: "opsz" 60;
}

With optical sizing, one family gives you a sturdy, loosely spaced text cut at 16px and a refined, high-contrast display cut at 64px. That can eliminate the need for a separate display family entirely. The full mechanics are in what optical sizing is.

Common Mistakes

Using a Display Font for Body Text

This is the big one. Hairline serifs disappear, tight spacing crowds letters together, and reading slows down. If brand guidelines insist on a display face, confine it to headlines and pair it with a text face for everything else.

Using a Text Font at Huge Sizes Without Adjustment

A text font at 80px with its default spacing and 1.5 line height looks loose and amateurish. Tighten tracking by 1–3% (letter-spacing: -0.01em to -0.03em) and drop line height to 1.0–1.15.

Letting Display Fonts Fall to Small Sizes on Mobile

A heading that's 48px on desktop may scale down to 22px on a phone. If the display face doesn't hold up at that size, either set a higher minimum in your clamp() or switch to the text family below a breakpoint.

Loading a Full Display Family

Display fonts are often used in a single weight. Load only that weight. There's no reason to ship six weights of a headline face you use at 700.

Ignoring Character Coverage

Some display fonts have limited character sets with no accented letters, missing currency symbols, or odd figures. Check that your headlines, including names and prices, render without falling back mid-word.

A Quick Pairing Framework

When combining a display font and a text font, aim for contrast in one dimension and harmony in another:

Display font	Text font	What contrasts	What harmonizes
Playfair Display	Source Sans 3	Serif vs. sans	Similar x-height ratio
Fraunces (high opsz)	Inter	Soft serif vs. sans	Both warm and modern
Space Grotesk	IBM Plex Sans	Quirky vs. neutral	Both grotesque sans
Bebas Neue	Roboto	Condensed caps vs. normal	Both geometric-leaning
DM Serif Display	DM Sans	Serif vs. sans	Designed as a superfamily

For the full set of pairing rules, read how to pair fonts.

Display Fonts vs. Text Fonts FAQ

Conclusion

Display fonts and text fonts differ in their intended size, and that single fact shapes their contrast, spacing, x-height, and detail. Text fonts are built to vanish in long passages at small sizes. Display fonts are built to be seen in a few words at large sizes. Use each where it was designed to work and both look better.

In practice, reserve display faces for headlines, pull quotes, and big numbers, switch to the text family for smaller headings and all body and UI text, and adjust spacing when you push a text font large. If you want one family to do both jobs, choose a variable font with an optical size axis and let the browser handle the transition.

Here are some useful references for going deeper on display and text fonts:

1. Google Fonts Knowledge: Introducing type — foundational lessons on type classification and how fonts are used at different sizes.
2. MDN Web Docs: font-optical-sizing — how browsers apply the opsz axis automatically.
3. Butterick's Practical Typography: Font recommendations — practical advice on choosing fonts for body text.
4. Microsoft Typography: OpenType Design-Variation Axis Tag 'opsz' — the specification for the optical size axis.