Line Length

Almost every site you've built has body text that runs too wide on a large display. You fix the layout. The paragraph still spans the full column. Reading slows before anyone notices why.

The Principle

In typography, measureIn typography, measure is the width of a text column: how many characters fit on one line. On the web, it is controlled by max-width on the text container, often expressed in ch units. is the width of a line of text, usually expressed as characters per line (CPL)Characters per line: how many letters fit on one line before the text wraps.. Your eyes move in quick jumps called saccadesRapid eye movements between fixation points while reading., pausing at fixationsBrief pauses where the eye lands and the brain processes words. to process words. Too wide, and the return sweep to the next line fails. Too narrow, and those jumps multiply.

The Rule I Follow

Set max-width: 65ch on every container holding reading text. I'll go slightly narrower on mobile or wider for large display type, but I tune by eye from there.

Try It Yourself

Drag from 45 → 65 → 90 CPL. Feel where reading settles and where it starts to strain.

At 45 the rhythm feels choppy. Past 90 you lose your place on the return sweep.

The Mistake I'd Avoid

Letting paragraphs stretch edge to edge on large displays. A wider container doesn't improve readability. It often hurts it.

Remember This

If long-form text feels tiring to read, measure is one of the first things I'd check.

Use ch instead of px so measure stays tied to the typeface, not the viewport.

p {
max-width: 65ch; /* tie measure to the typeface, not the viewport */
}

p {
max-width: 65ch; /* tie measure to the typeface, not the viewport */
}