Measure: max-width for readable line lengths

The "ideal measure" for body text

Typography research converges on 45-75 characters per line for sustained reading. Wider lines tire the eye (hard to find next line after long return); narrower lines fragment the rhythm.

.prose {
  max-width: 65ch;     /* ch unit = width of "0" character */
}

65ch reads as "65 zero-widths wide" — which for most body fonts at 16px works out to ~520px, fitting 60-70 characters of body text per line.

When to ignore the rule

• Tables. Tables of data routinely exceed 65ch; that's expected, not a typography failure.
• Code blocks. Code lines can be 80-120ch. Don't constrain.
• Headlines. A single-line headline doesn't need a measure limit.

Compose with grid

.layout {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
.layout > * {
  grid-column: 2;          /* every child centered + max 65ch */
}
.layout > .full-bleed {
  grid-column: 1 / -1;     /* opt out for hero images */
}

A blog-style layout where prose is constrained but heroes are full-width. Two declarations.

Don't use width

.prose { width: 65ch; }     /* breaks on narrow screens — overflow */
.prose { max-width: 65ch; } /* shrinks below 65ch when screen is narrow */

Always max-width, never width for content widths.