Measure & Readability

Measure — the width of a line of text — is one of the most impactful and most neglected variables in web typography. A typeface can be beautiful, the size appropriate, the line height generous, and yet if the line is too long or too short, reading becomes a chore. The eye loses its place. Comprehension drops. The reader leaves.

Research consistently shows that optimal line length for sustained reading falls between 45 and 75 characters per line (CPL), including spaces and punctuation. This range balances two competing demands: lines long enough that the eye can flow smoothly without excessive jumping, and short enough that the return sweep to the next line is reliable.

Why Measure Matters

Reading is a rhythmic activity. The eye reads in saccades — rapid jumps across the line — followed by a return sweep to the beginning of the next line. When lines are too long, the return sweep becomes unreliable. Readers lose their place, re-read lines, or abandon the text. When lines are too short, the constant jumping creates a staccato rhythm that fragments comprehension and wastes horizontal space.

The character-per-line metric accounts for the fact that different typefaces and sizes produce different physical line widths at the same character count. A 16px line of Georgia at 65 CPL is roughly 520px wide. The same 65 CPL in a condensed sans-serif might be 420px. Measuring in characters rather than pixels keeps the rule applicable across typefaces and sizes.

The 45–75 CPL Range

Within the optimal range, preferences and context create nuance:

45–55 CPL (narrow): Ideal for mobile screens, sidebar content, captions, pull quotes, and secondary reading contexts. Lines feel focused and scannable. At this width, slightly tighter line height (1.4–1.5) works well because the return sweep is short.

55–65 CPL (optimal): The sweet spot for most body text on desktop and tablet. Long-form articles, documentation, and editorial content perform best here. This is the range cited in most typography references and supported by readability research.

65–75 CPL (wide): Acceptable for experienced readers scanning familiar content types — news articles, technical prose, content the audience expects to read in wide columns. Beyond 75 CPL, readability degrades noticeably for most readers regardless of experience.

| CPL Range | Label | Best For | |-----------|-------|----------| | 35–45 | Very narrow | Mobile portrait, captions | | 45–55 | Narrow | Mobile landscape, sidebars | | 55–65 | Optimal | Desktop body text, articles | | 65–75 | Wide | Desktop, experienced readers | | 75+ | Too wide | Avoid for sustained reading |

Measure Across Viewports

Responsive design complicates measure because viewport width and optimal line length do not scale together. A 65 CPL line that works perfectly on a 1280px desktop monitor would produce only 35 CPL on a 375px phone — too narrow for body text. The solution is not one measure for all viewports, but a responsive strategy.

Desktop (1024px and above)

Desktop layouts afford the full 45–75 CPL range. Constrain body text columns with max-width: 65ch and center them within wider layouts. When using multi-column layouts, each column should independently fall within the optimal range — two 65 CPL columns side by side require substantial total width.

For pages with supplementary content (sidebars, navigation, related links), the main reading column should maintain optimal measure even if surrounding elements use wider or narrower widths. Never stretch body text to fill available space.

Tablet (768px–1023px)

Tablets in landscape orientation can support 55–65 CPL with appropriate margins. In portrait, the effective reading width often drops to 45–55 CPL — still comfortable for body text. Avoid treating tablets as "small desktops" with the same column widths; the reading distance and context differ.

Padding matters more on tablets. A 768px viewport with 48px total horizontal padding leaves 672px for content — enough for 60+ CPL at 16px. Without adequate padding, text feels edge-to-edge and measure becomes uncomfortable even when mathematically acceptable.

Mobile (below 768px)

Mobile reading typically occurs at 35–50 CPL depending on device and margins. This is narrower than the desktop optimum but remains readable because:

• Reading distance is closer (smaller screens are held nearer)
• Mobile content tends toward shorter paragraphs and more headings
• Users expect to scroll vertically rather than scan horizontally

Do not artificially constrain mobile text narrower than necessary. A 320px viewport with 32px padding leaves 256px — roughly 40 CPL at 16px, which is acceptable. Adding a max-width: 45ch on mobile may over-constrain and waste screen space.

Multi-Column Layouts

When text flows into multiple columns, each column must independently satisfy measure requirements. A three-column layout where each column is 30 CPL will fatigue readers regardless of how elegant the grid appears.

Rules for multi-column measure:

• Two columns: Each column should be 45–55 CPL. Total layout width must accommodate both columns plus gutter (typically 24–48px between columns).
• Three or more columns: Reserve multi-column layouts for short content blocks — pull quotes, feature lists, comparison tables — not sustained body text. No column should fall below 35 CPL.
• Responsive collapse: Multi-column layouts should collapse to single column on tablet or mobile, re-establishing optimal measure at each breakpoint.

Measure and Other Typography Variables

Measure does not exist in isolation. It interacts with every other typographic decision:

Font size: Larger text tolerates wider measure because each line contains fewer characters at the same pixel width. A 20px body size at 600px width produces fewer CPL than 16px at the same width. Adjust measure when changing size.

Line height: Wider measure demands more generous line height. At 70 CPL, line height of 1.6–1.7 prevents the eye from skipping lines. At 50 CPL, 1.5 is sufficient.

Typeface width: Condensed typefaces fit more characters per line at the same pixel width. A condensed sans at 65 CPL may need a narrower pixel max-width than a regular-width serif at the same CPL target.

Alignment: Fully justified text (flush left and right) creates uneven word spacing that is harder to read at wide measures. Limit justification to narrow columns (45–55 CPL) or avoid it on screen entirely.

Common Measure Mistakes

Full-width body text. The most prevalent web typography error. Content areas that expand to fill 1200px+ viewports produce 100+ CPL lines that are physically exhausting to read. Always constrain.

Identical measure for all content types. Navigation labels, captions, and sidebar teasers have different reading patterns than body paragraphs. Apply measure constraints to sustained reading content; allow shorter content types more flexibility.

Ignoring padding in CPL calculations. A max-width: 65ch container inside a padded parent may still produce acceptable measure, but nested padding can push effective CPL below optimal on smaller viewports. Calculate total available width, not just container max-width.

Confusing container width with text width. A 1200px container with a 600px text column is fine. A 600px container with 600px text edge-to-edge is also fine. A 1200px container with 1200px text is not.

Testing Your Measure

The most reliable measure test is reading your content aloud while following along with your finger or cursor. If you lose your place during the return sweep, the measure is too wide. If the rhythm feels choppy and fragmented, it is too narrow.

Use the interactive tester below to preview how different font sizes, container widths, and typefaces affect characters per line across simulated viewports.

Implementation Patterns

Constrain measure in CSS with semantic, responsive patterns:

.prose {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.prose-wide {
  max-width: 75ch;
}

.prose-narrow {
  max-width: 55ch;
}

For layout systems, define measure tokens alongside your type scale:

:root {
  --measure-narrow: 45ch;
  --measure-default: 65ch;
  --measure-wide: 75ch;
}

Apply --measure-default to article body content, --measure-narrow to mobile-specific or sidebar contexts, and --measure-wide sparingly for technical or reference content where scanning behavior dominates linear reading.

Measure is a constraint that liberates readability. By limiting how wide text can spread, you ensure that every line length serves the reader — across every device, at every size, in every context.