What are display fonts and how do you use them well?

Display fonts are typefaces designed to be used at large sizes, for headlines, hero banners, logos, posters and other short pieces of text meant to catch the eye. Compared with text fonts, they often have more extreme features: very high stroke contrast, unusual shapes, tight spacing, heavy or condensed weights, or decorative details that would be distracting or illegible in a paragraph. Examples include Abril Fatface, Bebas Neue, Playfair Display, Anton and Lobster. You use them well by keeping them large and brief, pairing them with a dependable text font for everything else, and loading them efficiently so they don't slow down the page.

A good display font gives a site personality in a way a text font can't. A poor one, or a good one used in the wrong place, makes headings hard to read and pages feel cluttered. In this article you'll learn what makes a typeface a display face, the main styles you'll encounter, where they work and where they don't, how to set display type in CSS, how to keep it accessible and responsive, and how to load it without hurting performance.

What Makes a Font a Display Font

Text fonts are designed to disappear: they need to be comfortable over thousands of words at 16 to 20 pixels. Display fonts are designed to be noticed. That changes the design priorities.

Typical features of display faces include:

• Fine details that need size to show: Hairline strokes, tiny serifs or intricate ornaments that would vanish or blur at body size.
• Tight default spacing: Letters sit close together because large text looks loose if spaced like body text.
• Extreme proportions: Very condensed, very wide, very heavy or very light.
• Strong personality: Unusual letterforms, decorative elements or a distinctive mood.
• Limited character sets: Some display fonts include only capitals, or lack italics, small caps or a full range of symbols.

Display Styles Within Text Families

Many typeface families include a display cut alongside their text styles. For example, a family might have a "Text" version with a larger x-height, sturdier details and looser spacing, and a "Display" version with finer contrast and tighter spacing for headlines.

Some variable fonts handle this automatically with an optical size axis (opsz). As the font size increases, the font adjusts its design towards display proportions. Browsers apply this by default when the font supports it, through the font-optical-sizing: auto setting.

Main Styles of Display Font

Display fonts come in every style, but a few groups appear often on the web:

Style	Characteristics	Examples
High-contrast serif	Thick stems, hairline strokes, often Didone-inspired	Playfair Display, Abril Fatface, DM Serif Display
Condensed sans	Narrow, tall, often all caps	Bebas Neue, Oswald, Anton
Heavy or black sans	Very bold weights for maximum impact	Archivo Black, Rubik in Black weight
Script and brush	Flowing, handwritten or calligraphic	Lobster, Pacifico
Decorative and novelty	Themed shapes, outlines, stencils, retro styles	Monoton, Bungee

All of the examples in this table are available under the SIL Open Font License on Google Fonts.

Where Display Fonts Work

Display fonts are at their best in short, prominent text:

• Hero headlines: The first thing visitors see, and the place where a striking typeface makes the biggest impression.
• Page titles and section headings: Particularly on editorial, portfolio and marketing pages.
• Logos and wordmarks: A display face can carry a brand's personality in a few letters.
• Pull quotes and big numbers: Statistics or short quotes set very large.
• Posters, event pages and campaign landing pages: Where the design is meant to be expressive and the text is short.

Where Display Fonts Don't Work

• Body text: Paragraphs in a display face are tiring at best and illegible at worst.
• Small text: Captions, labels and buttons at small sizes lose the details that make display faces work.
• Interfaces and forms: Navigation, form labels and error messages need instant recognition, not personality.
• Long headings: A display face that's striking for three words can be hard to read for fifteen.
• Content in all caps that's long: Many display faces are capital-heavy; long all-caps headings are slow to read.

A useful rule of thumb is that if the text is long enough to need line wrapping more than once or twice on a phone, consider whether a display face is the right choice.

Setting Display Type in CSS

Size and Line Height

Display type needs large sizes, and it needs much tighter line height than body text. A line height of 1.6 that suits paragraphs leaves huge gaps between lines of a 64px headline.

:root {
  --font-display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.display-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.25rem + 5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
}

body {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

A few notes on those values:

• clamp() keeps the headline readable on phones and dramatic on desktops without media queries. Combining a rem value with a vw value means the size still responds to the reader's zoom setting.
• line-height: 1 suits very large single- or double-line headings. Check that descenders and ascenders on consecutive lines don't collide.
• Slight negative letter spacing can tighten large type, but don't overdo it, and test with your actual words.
• text-wrap: balance evens out line lengths so a two-line heading doesn't end with one lonely word.

Uppercase Display Text

Condensed display faces are often set in capitals. Use CSS for the casing instead of typing the words in capitals, so screen readers and copy-paste receive normal text. Capitals usually benefit from a little extra letter spacing:

.eyebrow {
  font-family: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

<p class="eyebrow">Summer festival 2026</p>
<h1 class="display-1">Three days of music by the sea</h1>

Optical Sizing

If your display face is a variable font with an opsz axis, the browser picks a matching optical size for each font size automatically. Not every display font has one: the Google Fonts version of Playfair Display has only a weight axis, while Fraunces, for example, has an optical size axis running from 9 to 144. You can override the automatic choice when needed:

.display-optical {
  font-family: "Fraunces", Georgia, serif;
  /* Let the browser match optical size to font size (the default) */
  font-optical-sizing: auto;
}

.display-optical.extra-fine {
  /* Force the most display-like optical size the font offers */
  font-variation-settings: "opsz" 144;
}

The valid opsz range depends on the font. Check its documentation or the axis details on its specimen page.

Keeping Display Type Accessible

Display type is still text, and it still needs to work for everyone.

1. Use real text, not images: Text in images can't be resized cleanly, translated, searched or reliably read by screen readers. Live text in a web font avoids all of that.
2. Check contrast: Large text needs a contrast ratio of at least 3:1 under WCAG 2.2 Level AA. WCAG defines large text as at least 18 point (roughly 24px) regular, or 14 point (roughly 18.66px) bold. Hairline display faces can look lighter than their nominal weight, so aim higher than the minimum.
3. Keep heading semantics: Style headings with classes, but keep the correct h1 to h6 structure.
4. Avoid hiding meaning in decoration: If letters are so stylised that the word is hard to recognise, readers with low vision or dyslexia may struggle.
5. Test zoom and reflow: At 200% zoom and on narrow screens, large headings should wrap rather than overflow.

Loading Display Fonts Efficiently

Display fonts are often used for just a handful of words, so it's wasteful to download a large file for them.

Load Only What You Use

If you only need one weight, load only one weight. A single static file is often smaller than a full variable font when you need just one style.

Subset to the Characters You Need

If your display font is used only for headings in one language, you can strip out unused characters with pyftsubset, part of the fonttools package. Check that the font's licence allows modification first; the SIL Open Font License does.

pip install fonttools brotli
pyftsubset PlayfairDisplay-ExtraBold.ttf \
  --unicodes="U+0020-007E,U+00A0-00FF,U+2018-201F,U+2013-2014,U+2026" \
  --layout-features="kern,liga" \
  --flavor=woff2 \
  --output-file=playfair-display-800-latin.woff2
ls -lh playfair-display-800-latin.woff2

The range covers basic Latin, Latin-1 accented letters, curly quotes, en and em dashes and the ellipsis. Make sure any text that might appear in your headings, including names and other languages, is covered.

Define a Fallback and Font Display

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201F, U+2026;
}

font-display: swap shows the fallback immediately and swaps in the display font when it arrives. For a hero headline, you might preload the file so it arrives as early as possible:

<link
  rel="preload"
  href="/fonts/playfair-display-800-latin.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Only preload the one or two fonts used above the fold. Preloading everything competes with other critical resources. For more on this, see how to preload fonts correctly.

Choosing a Display Font

When you're comparing options, test them with your actual headline text rather than the specimen's sample sentence.

• Does it suit the content? A playful script on a financial services site sends the wrong message.
• Is it legible at your smallest heading size? Check it on a phone, not just at desktop hero size.
• Does it have the characters you need? Look for accented letters, numerals, punctuation and currency symbols.
• Does it pair with your text font? Contrast is good, but proportions and mood should feel related.
• Is the licence suitable? Check that web use is allowed and whether there are page view limits.

---

FAQ: Display Fonts

---

Conclusion

Display fonts are built for impact at large sizes. Their high contrast, tight spacing, unusual proportions and decorative details make headlines, logos and hero sections memorable, but the same features make them unsuitable for body text, small labels and interfaces.

Use one display face, keep it large and brief, and pair it with a reliable text font. Set it with tight line height, responsive sizing through clamp() and balanced wrapping, keep it as real, accessible text with sufficient contrast, and load only the weight and characters you need. Done that way, a display font adds character to a site without costing readability or speed.