Measure-locked prose

Running text capped at a readable measure and parked in a single grid column, regardless of how wide the viewport gets.

Grade: ARuntimes: cssStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

The same fluid scale that makes display type enormous will happily make a paragraph 200 characters wide on an ultrawide monitor, which is unreadable. Locking the measure is the discipline that lets the rest of the page be indulgent.

Implementation

`ch` tracks the actual font, so the measure stays correct if the typeface changes.

Dependencies: none

html-css-js

.prose {
  grid-column: 1 / -1;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
  hyphens: manual;
}

@media (min-width: 72rem) {
  .prose { grid-column: 3 / 9; }
}

.prose > * + * { margin-block-start: var(--space-sm); }

/* One sentence per page is allowed to break the measure. */
.prose .pull {
  max-width: none;
  margin-block: var(--space-lg);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

Use it when

Every paragraph of running text on the page.

Avoid it when

Single-line labels, captions, and pull quotes, which are set by their own rules.

Accessibility

55–75 characters is the readable band. Below 45 the eye reverses too often; above 80 it loses the line.
`text-wrap: pretty` prevents orphans without the jagged edge that `balance` produces on long text.
Never justify — the resulting rivers are worse than a ragged edge.

Performance

Pure CSS.

Knobs

measure: Maximum line length. Default: 62ch
pull quote size: Size for the measure-breaking variant. Default: var(--fs-h2)

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Cap all running text at a 62ch measure inside a single grid column (3/9 at desktop, full width below). Use --fs-body, 1.55 leading, text-wrap: pretty, and an owl selector for vertical rhythm. Add a .pull variant that removes the max-width and steps up to --fs-h2 with balanced wrapping. Do not justify text.