Constrain content widths

Keep text at 45-75 characters per line and forms at 300-500px wide.

From refactoring-ui, section 2, Spacing & Sizing.

Measure the line

Drag the handle, or snap to a preset width.

0 chars per line Too long

Where the eye gets lost

At the end of every line the eye jumps back to the left edge and has to land on the start of the next one. On a short line that jump is easy. On a long one the target is far away and faint, so readers slip a line, reread the same one, or give up. Designers who leave text at full width on a large monitor ask for that jump more than a hundred characters at a time. Cap the column and the page reads faster, even though nothing about the words changed.

max-width: 0chline-height: 1.6
.measure { max-width: 44ch; line-height: 1.7; }

A form is not a banner

Type in either form and compare field widths.

StretchedBad
width: 100%0px
ConstrainedGood
max-width: 28rem0px

Past a width, stop growing

Slide the viewport; the constrained column stops.

UnconstrainedBad
width: 100%0px
ConstrainedGood
max-width: 44ch0px

Why it matters, pros and cons

Why it matters

Past about 75 characters the eye misses the next line on its return sweep. A max width reads as a decision, not a default.

Pros

  • Readable at every size, no breakpoints.
  • Forms read as one unit.
  • Big screens get margins, not longer lines.

Cons

  • Tables, dashboards and code want the width.
  • 65ch holds about 96 Geist characters; count them.
  • Wide screens leave empty sides to fill.