#Mastering Line Length, Leading & Measure

#The Three Levers of Readable Text

If typographic hierarchy is about the large-scale organization of a page, measure and leading are about the small-scale experience of actually reading it. They govern the physical movement of the eye: how far it must travel across each line (measure), how far it must jump down to find the next one (leading), and how well it can maintain its place in a text block (the combination of both).

Get these wrong and even a beautifully chosen typeface becomes uncomfortable to read. Get them right and reading becomes effortless in a way the reader will never consciously notice — which is exactly the goal.

#Measure: How Long Is Too Long?

Measure is the typographer's term for line length — the horizontal distance a line of text travels. It is typically expressed in characters per line rather than pixels or centimeters, because it is the reading experience — not the physical dimension — that matters.

Robert Bringhurst, in The Elements of Typographic Style, identifies the optimal measure for single-column body text as 45 to 75 characters per line, with 66 characters as the ideal. This range has been arrived at empirically: lines shorter than 45 characters force too-frequent returns and interrupt reading flow; lines longer than 75 characters make it difficult for the eye to find the beginning of the next line after a return.

The 45–75 character guideline applies to body text — text the reader is meant to follow continuously. Different contexts modify it:

• Multi-column text (newspapers, magazines): 35–50 characters per column is typical
• Pull quotes and callouts: 25–40 characters, deliberately short for impact
• UI labels and form fields: measure is not typically the governing constraint
• Code blocks: monospaced type has different reading dynamics; 80 characters is the traditional limit

#CSS Implementation

The ch unit in CSS is defined as the width of the 0 (zero) character in the current typeface. This makes max-width: 65ch a direct implementation of Bringhurst's guideline:

.prose {
  max-inline-size: 65ch;
  margin-inline: auto;
}

Using max-inline-size rather than max-width applies the constraint in the writing direction of the current language — correct behavior for right-to-left languages as well.

Note that ch is not an exact character count — it measures the 0 character, and a proportional typeface has variable character widths. In practice, 65ch in a well-proportioned body typeface produces a line length in the 60–70 character range for mixed Latin text, which is precisely the target.

/* Complete readable prose container */
.article-body {
  max-inline-size: 65ch;
  margin-inline: auto;
  padding-inline: 1.5rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

#Leading: The Space Between Lines

Leading (rhymes with "heading") is the vertical distance from the baseline of one line to the baseline of the next. It is called leading because hot-metal typesetters used literal strips of lead to increase this distance in physical type composition.

In CSS, line-height is the controlling property. Unlike leading in traditional typesetting, CSS line-height is distributed equally above and below the text — half above, half below — which has implications for how text aligns with adjacent elements.

#The Sweet Spots

For body text, a line-height of 1.4 to 1.6 is the standard working range. The precise value depends on:

Typeface x-height: Typefaces with large x-heights (Inter, Helvetica) require more leading because the lowercase letters are visually tall relative to the cap height, making lines feel crowded at smaller leading values. Typefaces with small x-heights (EB Garamond) can be set tighter.

Measure: Longer lines require more leading. If your measure is at the 75-character outer limit, a line-height of 1.6 or even 1.7 helps the eye navigate between lines. Shorter measures can tolerate tighter leading.

Type size: Heading text (24px and above) typically reads well with line-height of 1.1 to 1.3. Body text (16–18px) reads well at 1.5 to 1.6. Small text (12–14px) may need 1.6 to 1.8 for legibility.

:root {
  --leading-tight:  1.1;  /* Display headings */
  --leading-snug:   1.3;  /* Subheadings, UI labels */
  --leading-normal: 1.5;  /* Body text, standard */
  --leading-relaxed: 1.6; /* Long-form reading */
  --leading-loose:  1.8;  /* Small text, captions */
}

h1 { line-height: var(--leading-tight); }
h2, h3 { line-height: var(--leading-snug); }
p { line-height: var(--leading-relaxed); }
.caption { line-height: var(--leading-loose); }

#Unitless Line-Height Is Correct

Always express line-height as a unitless number, not pixels or ems:

/* Correct: unitless line-height */
p { line-height: 1.6; }

/* Wrong: fixed unit — does not scale with inherited font-size changes */
p { line-height: 24px; }

/* Wrong: em — creates unexpected inheritance cascades */
p { line-height: 1.6em; }

A unitless value means "the line height is 1.6 times the current font size." This scales correctly when font size changes — through user zoom, clamp() scaling, or inherited size changes — and is inherited cleanly by child elements.

#The Relationship Between Measure and Leading

Measure and leading are not independent. They work together to govern the effort of reading a text block:

• Short measure + tight leading: compact, efficient, slightly pressured (news, UI)
• Short measure + loose leading: airy, editorial, can feel sparse
• Long measure + tight leading: fatiguing — the eye must scan far across lines and then jump precisely to the next one with little visual guidance
• Long measure + generous leading: the most common body text scenario; generous leading compensates for the distance the eye must travel

A useful rule of thumb: as measure increases, increase leading. If you extend a text column from 60ch to 80ch, compensate with line-height: 1.7 or more.

#Bringhurst's Broader Framework

The Elements of Typographic Style by Robert Bringhurst (Hartley & Marks, first published 1992, currently in its fourth edition) remains the most authoritative single text on typography. Its treatment of measure and leading is the source of most of the guidelines in this article. If you work seriously with type, own a copy.

Its central argument — that typography is a craft in service of the reader, not the designer — is as relevant in CSS as it was in hot-metal composition. The specific numbers Bringhurst provides (45–75 characters, 66 ideal) have survived decades of screen typesetting because they reflect how human eyes work, not how any particular technology works.

#Key Takeaways

• Optimal body text measure: 45–75 characters per line; max-inline-size: 65ch is the CSS implementation
• Leading for body text: 1.4–1.6; heading text: 1.1–1.3; always use unitless values
• Long measures require more generous leading; the two settings should be adjusted together
• line-height in CSS adds equal space above and below the line; plan for this when aligning text with other elements
• Bringhurst's Elements of Typographic Style is the source text for these guidelines and worth reading in full

#Further Reading

• Font Size, Scale & Modular Type Systems
• Widows, Orphans & Rivers: Microtypography
• Hierarchy: Guiding the Eye Through a Page
• Designing for Reading vs. Scanning