Line length and tracking

This paragraph starts too wide on a laptop. Pull the width slider left until the count turns green, and read it again.

The text didn't change. The reading did.

45 to 75 characters

The number of characters per line is called the measure. Robert Bringhurst's rule, which typographers have used for decades: 45 to 75 characters, with about 65 as the sweet spot for prose.

Why it matters: your eye reads a line, then swings back to find the start of the next. Too long and it loses its place on the way back. Too short and the constant swinging turns reading into work.

In CSS it's one line, thanks to the ch unit:

.prose { max-width: 65ch; }   /* Tailwind: max-w-prose */

On a wide screen this means a narrow column with space either side. That's correct. A 2,400px-wide paragraph is not "using the space", it's unreadable.

Tracking: tighter as type grows

Tracking is space added evenly between all letters (letter-spacing). It runs opposite to size. Drag the size up to a headline, then find the spacing that looks right.

Forgetting to tighten display text is one of the most common amateur tells. A 56px headline at default spacing looks loose and slightly cheap.

Don't confuse tracking with kerning, the font's own fixes for specific pairs like "AV". Kerning is built in and stays on.

Uppercase has rules

All-caps text is harder to read because every letter is the same height. Use it only:

• at small sizes (10–12px) with wide tracking, for nav, badges and table headers,
• or for very short phrases, under about four words.

Never for paragraphs. And be careful with the tiny tracked label above every heading (the "eyebrow"): taste-skill's gallery study found it on more than half of weak sites and a sixth of strong ones. Usually its words belong in the heading itself.

Choose how lines break

Two newer CSS values decide where lines wrap. Try them on a narrow column.

• text-wrap: balance for headings. It evens out the line lengths so you don't get a long line and a one-word line.
• text-wrap: pretty for card blurbs, standfirsts and empty-state copy. It stops the stranded last word, the orphan.
• Neither on long paragraphs. Browsers cap balance at a few lines, and a balanced paragraph narrows every line.

These two are supported in current Chrome and Safari, so you can ship them without a fallback; older browsers simply wrap normally.

Left-aligned, almost always

The ragged right edge is the eye's landmark. Justified text without hyphenation opens "rivers" of white space; centered text works for a short headline and fails past two lines.

Tune the reading experience:
- Cap every reading column at max-width: 65ch (check the count again if the font changes).
- Letter-spacing by size, in em: 0 for body, -0.02em around 32px, -0.04em at 64px+, +0.06em on small uppercase labels.
- text-wrap: balance on h1–h3; text-wrap: pretty on card descriptions and empty states; nothing on article paragraphs.
- Left-align body copy. Uppercase only for short labels at small sizes.