Display & Headlines

Everything in the previous lessons applies to body text — type set at 14–22px, read in paragraphs, optimised for sustained reading. Display type is a different problem. At 36px, 48px, 72px and above, the rules shift. Spacing that works at body size feels wrong at display size. Features that are invisible at 16px become essential at 60px.

Display cuts

Many professional typefaces ship in multiple optical sizes — variants drawn for specific size ranges. The names vary by foundry, but the pattern is consistent:

• Text / Regular — optimised for body sizes (12–18px). Wider spacing, open counters, sturdy stroke weight.
• Display / Headline — optimised for large sizes (24px+). Tighter spacing, finer details, higher contrast.
• Caption / Micro — optimised for tiny sizes (10px and below). Even wider spacing, heavier strokes.

The difference between Text and Display cuts of the same typeface can be dramatic. Display cuts assume the reader is seeing the type rather than reading it — they trade body-text robustness for elegance and precision.

On the web, use Display cuts only at large sizes. Never set body copy in a Display cut — the tight spacing and fine details break down at small sizes. And avoid Caption cuts for web body text; they are designed for print at sizes smaller than web body ever reaches.

Negative tracking

At body sizes, the font's built-in letter-spacing is correct and should not be touched. At display sizes, that same spacing can feel loose — the letters float apart instead of forming a cohesive word shape. Tightening the tracking (negative letter-spacing) pulls them back together:

.headline {
  font-size: 3rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

The amount depends on the typeface and the size. Start with -0.01em and increase until the letters feel like they belong together without touching. Display cuts often need less tracking adjustment than text cuts used at large sizes, because the tighter spacing is already built in.

Line height for headlines

The same line-height: 1.5 that works at 18px body text leaves a canyon between two 60px headline lines. As size goes up, line height should come down:

• Body text (16–20px): line-height: 1.45–1.5
• Large headings (28–48px): line-height: 1.15–1.25
• Display / hero text (48px+): line-height: 1.0–1.15

For single-line headlines, line height matters less. For multi-line display text, tight leading is essential — it keeps the lines visually connected as a single unit rather than drifting apart into separate sentences.

Use negative leading (line height less than 1.0) only when you are certain the ascenders and descenders will not collide. Test with real multi-line headlines before shipping.

Swashes and discretionary ligatures

In display contexts, OpenType features that are inappropriate for body text come alive:

• Swashes (swsh) — ornate alternate letterforms with flourishes. A swashed capital T or italic Q can add personality to a headline.
• Discretionary ligatures (dlig) — decorative pairs like st, ct, Th that are too distracting for body but beautiful at large sizes.
• Stylistic alternates (salt, ss01–ss20) — alternate letter designs the font designer offers as options.

.display-heading {
  font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
  letter-spacing: -0.02em;
  line-height: 1.1;
}

Look for swashes in italic cuts or separate swash font files. Use them on specific letters where the flourish works, not across entire words. A swashed Q is elegant; every letter swashed is a circus.

Drop caps

A drop cap is an oversized initial letter at the beginning of a chapter or article. It signals the start of a new section and adds visual interest to an otherwise uniform column of text.

CSS now offers initial-letter for drop caps, though browser support is still growing:

.article > p:first-of-type::first-letter {
  initial-letter: 3; /* spans 3 lines */
  font-weight: 700;
  margin-right: 0.1em;
}

The number specifies how many lines the drop cap should span. Three is traditional; two feels subtle; four or more dominates the paragraph. Pair the drop cap with a slightly larger or differently styled opening line for a polished editorial look.

Alternatives to initial-letter include absolutely positioned spans with manual sizing — more work but broader support.

Initial small caps

Instead of a drop cap, some editorial designs use initial small caps — the first few words of the opening paragraph set in small caps. This is a subtler way to mark the beginning:

.article > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
}

This technique works well with serifs and humanist sans-serifs that ship real small caps. It falls apart with pseudo small caps (scaled-down uppercase), so verify the font supports smcp before relying on it.

Breaking the grid

Large display type is one of the few contexts where intentionally breaking the layout grid feels right. An oversized headline that bleeds past the text column, a pull quote that spans the full width, or a number set at 120px that anchors a section — these moves create visual landmarks that help the reader navigate the page.

The key is intentionality. A headline that accidentally overflows its container is a bug. A headline that deliberately extends into the margin is a design choice. The difference is consistency: if you break the grid, break it the same way every time, at predictable locations, so the reader learns to expect it.

Give type room to breathe

The most common mistake in display typography is not giving it enough whitespace. A 48px headline crammed against a navigation bar, a hero tagline touching the edge of its container, a pull quote with no margin — all of these undermine the visual impact of large type.

Whitespace is a design element. Use it as deliberately as colour or weight. A headline with generous padding above and below feels confident; the same headline with tight margins feels cramped and anxious.