Readability Line Length

Readability — line length (measure)

Line length, also called measure in typography, is the number of characters per line. It's the most fundamental readability decision because it directly affects the reader's eye movement: at the end of each line, the eye must jump back and find the start of the next line, and the difficulty of that jump scales with line length.

The recommended range, established by centuries of book typography research and confirmed by modern reading studies: 45 to 75 characters per line for body prose, with 60–66 as the sweet spot for most use cases.

Why line length matters

Two failure modes bracket the comfortable range.

Too long (>75 characters per line). The eye must travel a long distance between line ends. The reader can lose their place — find the wrong line on the way back, or read the same line twice. Reading slows. Fatigue accumulates faster.

Too short (<45 characters per line). The eye has to jump too frequently. Each line break interrupts the cognitive thread. Words at the line ends are often hyphenated awkwardly. Reading feels stuttering rather than flowing.

The 45–75 range is wide enough to accommodate different design contexts; specific products can land at different points based on their typeface, audience, and content.

How line length is set

Line length is determined by:

Container width. A text container (<article>, <main>, a content column) has a width in pixels.

Font size. The number of characters per line depends on how many character-widths fit in the container.

Typeface character width. Different typefaces have different average character widths at the same point size. A condensed typeface fits more characters per line than a wide one.

Letter spacing. Looser letter spacing means fewer characters per line.

In practice: pick a target line length in characters (say, 65), and calculate the container width that produces that line length at your body size. For 16px Inter, this is roughly 600–700px container width. For 18px Georgia, it's about 650–750px. The exact number depends on the typeface.

The CSS approach: use max-width on text containers, with a value calibrated to your target line length. Or use ch units (which are based on character width): max-width: 65ch; produces approximately 65 characters per line in most typefaces.

Line length on responsive layouts

The biggest line-length challenge is responsive layouts that need to work across screen widths.

At wide desktop: without max-width, body text fills the entire viewport width, often producing 130+ character lines that fail readability.

At narrow mobile: the same text reflows to the narrow width, producing 30–40 character lines. With smaller font sizes, this can be acceptable, but the text feels cramped.

The fix: cap max-width on text containers (so lines don't get too long at wide widths), and consider scaling font size down on narrow widths (so lines don't get too short).

A practical pattern:

.prose {
  max-width: 65ch;
  font-size: 16px;
}

@media (min-width: 1024px) {
  .prose {
    font-size: 18px;
  }
}

This gives ~65 characters per line at all widths, with slightly larger text on larger screens.

Worked examples

A blog post layout

A blog post container with max-width: 65ch and 16px body text. On any screen wider than ~700px, the article reads at a comfortable line length. On screens narrower than ~400px (mobile portrait), the text reflows to fill the available width, producing 30–50 character lines depending on typeface.

The mobile case is suboptimal but acceptable. Consider bumping the body size to 18px on mobile to get back into the 45–55 character range.

A dashboard with embedded prose

A dashboard widget shows a paragraph of explanatory text inside a card. The card is 800px wide. Without intervention, the text fills the card and runs ~140 characters per line. Users skip the explanation because the long lines are visually intimidating.

The fix: cap the explanatory text's max-width at 65ch (about 600px at the dashboard's body size). The text now reads at a comfortable line length, even though the card is wider.

Email layout

An email template designed at 600px column width with 14px body text produces roughly 75–80 characters per line — at the upper edge of the comfortable range. On mobile (read in narrow portrait), the email may reflow to 320px, producing 40 character lines (just below the comfortable minimum, but acceptable).

The compromise of email design: you can't perfectly satisfy all clients and screen sizes. Pick a target (often 600px column at 14–16px text) and accept that some clients will render slightly wider or narrower.