# Line length and tracking

> Keep paragraphs between 45 and 75 characters a line, tighten big type and open tiny labels, and choose how headings and blurbs wrap.

Module: Typography · Level: beginner · 7 min · https://school.agents.org.in/design/typography/line-length

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

*[Interactive demo: The count is how many characters fit on a line at that width. Widen your window to see very long lines.]*

The text didn't change. The reading did.

## 45 to 75 characters

The number of characters per line is called the measure (How many characters fit on one line of a paragraph. 45 to 75 reads comfortably, about 65 is the sweet spot). 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 (A CSS unit equal to the width of the digit 0 in the current font. max-width: 65ch makes a column roughly 65 characters wide):

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

*(Re-check when you change font: the same width holds a different number of characters in a different face.)*

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 (Extra space added evenly between all letters. Big headings want it slightly tighter (negative), tiny uppercase labels slightly looser) 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.

*[Interactive demo: The band is the skill's starting range for each size. Snap applies it.]*

| Size | Tracking |
|---|---|
| 10–12px | **+0.04 to +0.08em** (often uppercase) |
| 14–18px body | **0** |
| 20–28px | **−0.01 to −0.02em** |
| 32–48px | **−0.02 to −0.04em** |
| 64px+ | **−0.04 to −0.06em** |

**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 spacing adjustments between specific letter pairs, like AV or To. Unlike tracking, it is built into the font and should stay on), 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.

*[Interactive demo: balance evens a heading's lines; pretty saves a blurb's last word.]*

- **`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 (A single short word left alone on the last line of a paragraph or heading. It looks like a mistake; text-wrap: pretty fixes most of them).
- **Neither on long paragraphs.** Browsers cap balance at a few lines, and a balanced paragraph narrows every line.

These two (CSS that controls where lines break. balance evens out the lines of a heading; pretty stops a paragraph ending on one stranded word) 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.

**Fix reading comfort (paste into your agent):**

```text
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.
```

**Check yourself:** A blog post's paragraphs run the full 1200px width of a laptop. What's the fix?

- [ ] Increase the font size until it fits
- [x] max-width: 65ch on the text column
- [ ] text-wrap: balance on the paragraphs
- [ ] Justify the text

*Why:* Long lines make the eye lose its place. A 65ch column keeps lines in the 45–75 character range. Balance on paragraphs would quietly narrow them; justify opens rivers.

## In the skill

- https://school.agents.org.in/skill/typography/line-length-tracking.md
- https://school.agents.org.in/skill/typography/line-behavior.md