Optimal reading measure

Quick implementation

.prose {
  max-width: 65ch;
  line-height: 1.7;
}

/* Narrower for dense content */
.prose--narrow {
  max-width: 50ch;
}

/* Wider for code-heavy content */
.prose--wide {
  max-width: 80ch;
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer optimizing reading experience.

Goal: Constrain paragraph text to an optimal reading width of 45–75 characters per line.

Technical constraints:
- Use max-width with the ch unit (character width of the "0" glyph in the current font).
- Default to 65ch — the sweet spot for body text.
- Set line-height to 1.6–1.8 for comfortable reading at this measure.
- Do NOT use px or rem for text width — ch scales with font size automatically.
- Provide variants: --narrow (50ch) for pull quotes, --wide (80ch) for code.

Edge cases:
- The ch unit is based on the "0" character, so actual character count per line varies with the font.
- On narrow viewports, the text naturally shrinks below max-width — no media query needed.
- Proportional fonts show fewer characters per ch than monospace fonts.

Why this matters in 2026

Typography research going back to the 1920s consistently shows that 45–75 characters per line is the optimal reading measure. Shorter lines break reading rhythm. Longer lines cause the eye to lose its place when tracking back to the start of the next line. The ch unit makes this trivially easy to enforce in CSS — max-width: 65ch adapts automatically to whatever font and size you're using.

The logic

The ch unit equals the advance width of the "0" (zero) character in the current font. For proportional fonts like DM Sans, actual character counts per line will be slightly higher than the ch value because most lowercase letters are narrower than "0". Setting max-width: 65ch typically yields 70–80 actual characters — right in the optimal zone. line-height: 1.7 provides enough vertical spacing for comfortable line-to-line tracking at this width.

Accessibility & performance

Optimal reading measure directly improves accessibility. Users with dyslexia or low vision benefit from constrained line lengths — it reduces the cognitive load of tracking across long lines. The ch unit scales with user font size preferences, so if someone increases their browser's default font size, the measure adjusts proportionally. Zero performance cost.