The short version
- Display fonts are typefaces designed to be used at large sizes, for headlines, posters, logos and covers, rather than for paragraphs.
- They usually have more contrast, tighter spacing or stronger personality than text fonts, which makes them striking large and hard to read small.
- Use a display font for a few words at a time, and pair it with a calm, readable text font for everything else.
- Large type needs tighter line height and often slightly tighter letter spacing than its default settings.
- Many families include a separate Display cut or an optical size axis that adapts the design automatically for big sizes.
On this page
Display fonts are typefaces drawn to be used big: headlines, posters, covers, packaging and short bursts of words. Their details, from sharp contrast between thick and thin strokes to tight spacing and expressive shapes, are designed to look their best at large sizes and usually fall apart at paragraph sizes. Use a display font for the few words that should stop someone, and a quieter text font for everything they read afterwards.
This guide covers what makes a font a display font, how big to set it, how to pair it, and how to keep big type from looking crowded or dated. It builds on typography basics and visual hierarchy.
What makes a display font different from a text font
Text fonts are built for comfort over thousands of words: open shapes, sturdy strokes, generous spacing and a large x-height so letters survive small sizes and poor screens. Display fonts trade some of that for character. At 80 px nobody struggles to see the letters, so the designer can push contrast, squeeze widths, sharpen details and tighten spacing.
| Feature | Text font | Display font |
|---|---|---|
| Stroke contrast | Low to moderate | Often high, with hairline thins |
| Spacing | Open, for small sizes | Tight, for large sizes |
| Details | Simple, robust | Fine serifs, ink traps, quirks |
| Best size | Roughly 12 to 24 px on screen | Roughly 40 px and up |
| Job | Being read | Being noticed, then read |
Some families come in both versions: a Text cut and a Display cut of the same design, or a single variable file with an optical size axis that adjusts itself as the size changes. Variable fonts explains optical size in more detail.
Kinds of display fonts, and the mood each sets
Display faces are easiest to choose by the feeling you want. Each family below includes widely available examples from Google Fonts, so you can try them on your own words.
- High-contrast serifs: fashion, culture, editorial. Examples: Playfair Display, DM Serif Display, Bodoni Moda.
- Condensed sans: urgency, sport, news, posters. Examples: Bebas Neue, Anton, Oswald.
- Wide and extended sans: tech, modern brands, confident calm. Examples: Syne, Unbounded.
- Soft and rounded: friendly, food, children, wellbeing. Examples: Fraunces with its soft axis, Fredoka.
- Heavy grotesques: bold statements, launches, activism. Examples: Archivo Black, Inter Tight at black weight.
- Script and hand-drawn: invitations, craft, personal brands, used sparingly. Examples: Caveat, Yellowtail.
An editorial cover: a display headline carries the design, with small text in a quiet face.
A sale post: condensed display type fits big words into a narrow space.
How big display type should be
Big enough that it is clearly the first thing people see, and small enough that the words fit on few lines. A useful habit is to size display type relative to the canvas rather than in points. On a 1080 by 1350 post, a two to four word headline often fills around 70 to 90 percent of the width. On a website, a hero headline usually sits somewhere around three to six times the body size.
On the web, clamp() scales display type smoothly between a minimum and a maximum, so it is big on large screens without overflowing on phones. Tighten line height and letter spacing as the size grows; the defaults are drawn for smaller text.
.hero-title {
font-family: "Fraunces", Georgia, serif;
font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
font-weight: 650;
line-height: 1.02;
letter-spacing: -0.02em;
text-wrap: balance;
max-width: 14ch;
}
.hero-lede {
font-family: "Inter", system-ui, sans-serif;
font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
line-height: 1.55;
max-width: 52ch;
}max-width in ch keeps the headline to a few lines.Pairing a display font with a text font
The simplest reliable pairing gives each font one job. The display face speaks loudly for a few words; the text face does the quiet work of captions, body copy, dates and prices. Contrast the two in at least one clear way, such as serif against sans or condensed against normal width, so they don't look like a near miss. Font pairing covers the rules in full.
Avoid
- Two display fonts competing on one design
- A display face for body text or small captions
- A pairing so similar it looks like a mistake
- Every word in the design at display size
Do
- One display face, one calm text face
- Display type for a few words only
- A clear contrast in structure or width
- Big words on top, small words doing the explaining
Display type on gradients and busy backgrounds
Large type is the most forgiving text you can put on a colourful background, because thick strokes hold their shape against movement in the field behind them. The risk is in the thin parts: hairline serifs and fine details disappear into a gradient's lighter or busier areas. On rich backgrounds, choose a display face with sturdier thins, or step up the weight.
Display type over a living gradient: the background calms and makes room behind the words.
In Gradiently, a Mark knows where your words are: its calmest region moves behind the headline and colours near the letters deepen or lift, so even fine display type holds. Lettering treatments such as Contour, Inline and Extrude add character to display words when the face itself is plain; text effects shows when those work.
Mistakes that make display type look cheap
- 1
Default spacing at huge sizes
Big type set with text defaults looks loose. Tighten line height to around 1 to 1.1 and letter spacing slightly.
- 2
Fake bold and fake italic
When a font lacks a style, tools and browsers may fake it by smearing or slanting letters. Load the real weights and italics.
- 3
Stretching type to fit
Never scale type horizontally or vertically. Choose a condensed or wide cut instead.
- 4
Trend faces with no reason
A face chosen because it is everywhere this season dates with the season. Choose for the mood you need.
- 5
Orphans in two-line headlines
A single short word alone on the second line weakens the headline. Rewrite, rebreak or use
text-wrap: balance.
Questions people ask
What is a display font?
A display font is a typeface designed for large sizes, such as headlines, posters and logos. Its details and tight spacing look best big and usually read poorly at paragraph sizes.
Can I use a display font for body text?
It is best not to. Display fonts sacrifice small-size legibility for character, so paragraphs set in them are tiring to read. Pair them with a text font instead.
How large should a display font be?
Large enough to be the first thing people see, usually several times the body size. On a 1080 by 1350 post, a short headline often spans most of the width.
Where can I find free display fonts?
Google Fonts has many display families under open licences, including Playfair Display, Bebas Neue, Anton and Fraunces. Always check a font's licence before using it in a brand.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
