Measure, not width

1 min read

Most layouts cap their reading column in pixels. max-width: 720px and move on.

That works until someone changes the font size.

The problem with pixels

Readability research points at a range of characters per line, not pixels — roughly 65 to 75. Past that the eye struggles to find the start of the next line, and you get the re-reading effect.

A pixel cap only produces the right character count at one specific font size. Bump the body text from 16px to 18px and your carefully chosen 720px column is now too wide.

Use ch

The ch unit is the width of the 0 glyph in the current font:

.prose {
  max-width: 68ch;
}

This holds at any font size, and it holds when a reader zooms to 200% — which is a WCAG requirement, not a nicety.

One caveat

ch is font-dependent, so 68ch in a condensed face is narrower than in a wide one. Set it once against your actual body font and check the result.