Display & headlines

Set a body typeface at 72px and look at the letterspacing. Too loose. The letters float apart instead of forming a word. Everything about body text reverses at display sizes.

Display cuts

Many professional typefaces ship in multiple optical sizes: variants drawn for specific size ranges.

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

Never set body copy in a Display cut. The tight spacing and fine details break down small.

Negative tracking

Start with -0.01em and increase until the letters feel connected without touching. Display cuts need less adjustment.

Line height for headlines

As size goes up, line height comes 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

Colour shifts at display sizes too. A heading in the same black as body text looks heavier because there is more ink per square centimetre. Lighten it.

Only go below 1.0 when you're certain ascenders and descenders won't collide.

Swashes and discretionary ligatures

OpenType features that are wrong for body text come alive at display sizes:

• Swashes (swsh): ornate alternates with flourishes.
• Discretionary ligatures (dlig): decorative pairs like st, ct, Th.
• Stylistic alternates (salt, ss01–ss20): alternate letter designs.

Use swashes on specific letters, not 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 start of a chapter or article. CSS offers initial-letter:

Three lines is traditional. Two feels subtle. Four or more dominates the paragraph.

Initial small caps

Verify smcp support first. Falls apart with pseudo small caps (scaled-down uppercase).

Breaking the grid

Large display type is one of the few contexts where breaking the layout grid works. If you break it, break it the same way every time.

The most common display mistake: not enough whitespace. Give type room.

initial-letter works in Safari and Chrome 110+. For broader support, use a float:

The float approach works everywhere but requires manual tuning of font-size and line-height.

Find the largest heading in your project. Add letter-spacing: -0.02em and line-height: 1.1. Compare before and after. Then check: is the heading weight heavier than the body? Consider dropping it one step (Bold to Semibold, or Semibold to Regular).