Readability

Readability

Optimizing for reading — line length (measure), line height (leading), paragraph spacing, text alignment, hyphenation, and reading patterns (F-pattern, Z-pattern)

When to Use

• Setting body text styles for any content-heavy page (documentation, blogs, articles)
• Configuring max-width on text containers to control line length
• Choosing line-height values for body text, headings, and captions
• Deciding between left, center, right, or justified text alignment
• Debugging layouts where users report text is "hard to read" or "tiring"
• Designing for screens where sustained reading is the primary activity

Instructions

1. Set line length (measure) to 45-75 characters per line. This is the single most impactful readability setting. The research is unambiguous: lines shorter than 45 characters cause excessive line breaks and choppy reading; lines longer than 75 characters cause the eye to lose its place when returning to the left margin.

   Concrete values for common body sizes:

   Font Size	Font	Ideal Max-Width	~Characters
   16px	Inter	640-680px	65-70
   16px	Georgia	600-640px	62-67
   18px	system-ui	700-740px	63-68
   21px	Georgia	780-820px	60-65

   Decision procedure: Set max-width on your text container. Paste a paragraph of real content. Count characters in the longest line. Adjust until you hit 60-70 characters. The exact pixel value depends on font, size, and letter-spacing — there is no universal pixel number.

   Two-column exception: When text is set in narrow columns (sidebars, cards, multi-column layouts), 35-45 characters per line is acceptable because the vertical distance between lines is shorter, making the return sweep easier.

2. Set line-height (leading) based on context. Leading is the vertical distance between baselines. Too tight and lines collide visually; too loose and the text disintegrates into separate strips.

   Context	Line-Height	Rationale
   Body text (16-18px)	1.5-1.65	Optimal for sustained reading
   Large body (20-24px)	1.4-1.5	Larger text needs proportionally less leading
   Headings (24-48px)	1.1-1.25	Tight leading keeps multi-line headings cohesive
   Display text (48px+)	1.0-1.1	Very large text looks disconnected with normal leading
   Captions (12-14px)	1.4-1.5	Small text needs generous leading for legibility
   Code blocks	1.5-1.7	Programmers scan vertically; generous leading aids line identification

   The inverse relationship: as font size increases, optimal line-height ratio decreases. Stripe demonstrates this: body at 16px uses line-height 1.40, but display headlines at 56px use line-height 1.03. The absolute leading increases (22.4px vs 57.7px) but the ratio tightens dramatically.

3. Set paragraph spacing to 0.5-1.0em between paragraphs. Use margin-bottom on paragraphs, not double line breaks. The spacing should be large enough to signal "new paragraph" but not so large that the text feels disconnected.

   • Standard: margin-bottom: 1em (one blank line's worth) — used by most systems
   • Compact: margin-bottom: 0.5em — for data-dense interfaces or when vertical space is premium
   • Generous: margin-bottom: 1.5em — for editorial/literary content with wide line spacing
   • Rule: paragraph spacing should be noticeably larger than line-height but smaller than section spacing

4. Default to left-aligned text for body content in LTR languages. Alignment choices:

   • Left (start): Default for all body text. The ragged right edge is natural and provides unique line shapes that help the eye track position. Always use for body text.
   • Center: Only for short text blocks (1-3 lines) — headings, hero text, call-to-action buttons. Never for paragraphs. Centered body text destroys the left anchor the eye uses for line returns.
   • Right (end): Reserved for specific UI contexts — numeric columns in tables (right-align numbers for decimal alignment), dates, prices. Never for body text.
   • Justified: Creates clean block edges but introduces variable word spacing ("rivers" of white space) unless the browser supports quality hyphenation. Use only when hyphens: auto is set AND the language has good hyphenation dictionaries (English, German, French — yes; Japanese, Chinese — not applicable). Even then, prefer left-aligned.

5. Understand reading patterns to structure content. Eye-tracking research (Nielsen Norman Group) identified two primary scanning patterns:

   F-Pattern (content-heavy pages):

   • Users read the first line or two fully (horizontal bar 1)
   • Eyes drop down and read a shorter horizontal segment (horizontal bar 2)
   • Users scan the left edge vertically, picking up first words of each line/section
   • Implication: put the most important information in the first two lines of each section and at the start of each paragraph. Front-load sentences with key terms.

   Z-Pattern (sparse layouts, landing pages):

   • Eyes move: top-left -> top-right -> diagonal to bottom-left -> bottom-right
   • Implication: place the logo/brand top-left, the CTA top-right, supporting info bottom-left, primary action bottom-right

6. Optimize the relationship between font size, line-height, and measure. These three properties are interdependent — changing one requires reconsidering the others:

   • Increase font size -> line-height ratio can decrease, but measure (px) should increase to maintain character count
   • Increase line-height -> measure can increase slightly (more leading makes longer lines easier to track)
   • Decrease measure -> line-height can decrease slightly (shorter lines need less leading because the return sweep is shorter)

Details

Readability Configurations from Leading Design Systems

Stripe Documentation

• Body: 16px, Inter, line-height 1.625 (26px), max-width ~680px (~70 characters)
• Why it works: the generous 1.625 line-height compensates for Inter's tall x-height, which can make lines feel cramped at standard 1.5 leading. The 680px max-width keeps lines at exactly 68-72 characters.

Apple Developer Documentation

• Body: 17px, SF Pro Text, line-height 1.47 (25px), max-width ~800px (~72 characters)
• Apple uses a slightly larger body size (17px vs the industry standard 16px) and a moderately generous line-height. The wider max-width is acceptable because the larger font size maintains character count within range.

Medium / Reading-Optimized Platforms

• Body: 21px, charter/Georgia fallback, line-height 1.58 (33px), max-width ~680px (~52 characters)
• Medium uses an unusually large body size with generous leading. The result is a "book-like" reading experience — fewer characters per line (52 vs the recommended 65) creates a faster-paced rhythm appropriate for the platform's short-to-medium article format.

Material Design 3

• Body Large: 16px, Roboto, line-height 1.5 (24px)
• Body Medium: 14px, Roboto, line-height 1.43 (20px)
• Body Small: 12px, Roboto, line-height 1.33 (16px)
• Material uses tighter line-heights as sizes decrease — the opposite of best practice for extended reading. This works because Material targets UI labels and short descriptions, not sustained reading.

The Measure-Leading Interaction

Practical table for common configurations:

Scenario	Font Size	Line-Height	Max-Width	Chars/Line
Documentation	16px	1.6	680px	68
Blog/editorial	18px	1.7	720px	62
Literary reading	21px	1.6	680px	52
Dashboard text	14px	1.5	480px	55
Card description	14px	1.45	320px	38
Code block	14px	1.6	880px	100

Code blocks are the exception to the 75-character rule — developers expect wide lines and horizontal scroll, and the monospace font provides character-level position tracking that proportional fonts cannot.

Hyphenation and Justification

Justified text is the default in print because page layout engines (InDesign, TeX) have sophisticated paragraph-level justification algorithms. Web browsers do not — they justify line by line, producing inferior results.

If you must use justified text on the web:

.justified-text {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word; /* prevent overflow on long words */
  overflow-wrap: break-word;
  max-width: 680px; /* justified text requires controlled measure */
}

Even with these settings, justified web text will have visible rivers in narrow columns. If the container is narrower than 500px, never justify.

Anti-Patterns

1. Full-width body text. Setting body text at width: 100% on a 1920px monitor produces lines of 160+ characters. The eye cannot track back to the correct next line after such a long horizontal sweep. This is the most common readability failure on the web. Fix: max-width: 65ch or a pixel equivalent based on your font.

2. Cramped leading. Line-height of 1.0-1.2 for body text (16px font, 16-19px line-height) causes ascenders and descenders of adjacent lines to collide visually. The text feels dense, claustrophobic, and tiring. Common cause: inheriting line-height: 1.2 from a CSS reset that was designed for headings, not body text. Fix: set body line-height explicitly to 1.5-1.65.

3. Justified text without hyphenation. Justified text distributes extra space between words to fill the line. Without hyphenation, long words force enormous gaps. On narrow columns (300-400px), individual lines can have gaps wider than the words themselves, creating "rivers" of white space that flow vertically through the paragraph. Fix: either add hyphens: auto or switch to text-align: left.

4. Centered body paragraphs. Centering more than 3 lines of text destroys the fixed left edge that the eye uses to locate the start of each new line. Reading speed drops by 10-20% (per Nielsen Norman Group research). Fix: center only headings, short taglines, and CTAs. Left-align all body paragraphs.

5. Uniform line-height across all sizes. Setting line-height: 1.5 globally means a 48px heading gets 72px of leading (excessive, text floats apart) while 12px captions get 18px (possibly too tight). Fix: define line-height per text role, with the ratio decreasing as font size increases.

Real-World Examples

Fixing a Documentation Site Before: 14px body, line-height 1.3, full-width (1200px container), justified alignment. Users reported "eye strain" and "losing my place." After: 16px body, line-height 1.6, max-width 680px centered in the layout, left-aligned. Bounce rate decreased 15%, average time on page increased 25%. The changes were purely typographic — no content, layout, or color changes.

Optimizing a Reading App A Kindle-style web reader tested 3 configurations with 500 users:

• Config A: 16px, line-height 1.5, 600px width (65 chars) — 4.2 min average reading time
• Config B: 18px, line-height 1.6, 660px width (60 chars) — 3.9 min average reading time
• Config C: 21px, line-height 1.7, 680px width (52 chars) — 4.0 min average reading time Config B won on reading speed. The 18px size with 1.6 leading hit the optimal balance — large enough for comfortable reading without reducing characters-per-line below 55.

Source

• Bringhurst, Robert. The Elements of Typographic Style — on measure and leading
• Butterick, Matthew. Butterick's Practical Typography — line length, line spacing, text alignment
• Nielsen Norman Group — "F-Shaped Pattern for Reading Web Content" (2006, updated 2017)
• Dyson, M.C. & Haselgrove, M. (2001). "The influence of reading speed and line length on the effectiveness of reading from screen"
• WCAG 2.1 Success Criterion 1.4.8 — Visual Presentation (recommended line length, leading, alignment)

Process

1. Evaluate — Measure the current line length (characters per line), line-height ratio, and paragraph spacing. Identify the reading pattern appropriate for the page type (F-pattern for content, Z-pattern for sparse layouts).
2. Apply — Set max-width to achieve 45-75 characters per line. Set line-height appropriate to font size (1.5-1.65 for body, 1.1-1.25 for headings). Left-align body text. Add paragraph spacing at 0.5-1.0em.
3. Verify — Count characters per line with real content. Check that the squint test shows clear paragraph separation. Confirm that line-height produces no visual collision between ascenders and descenders.

Harness Integration

This is a knowledge skill. When activated, it provides readability optimization expertise for text layout decisions. Use these principles when setting max-width, line-height, text-align, margin-bottom, and hyphens properties. Cross-reference with design-responsive-type for viewport-adaptive adjustments and design-content-density for information-rich interfaces.

Success Criteria

• Body text line length is 45-75 characters (measured with actual content, not estimated)
• Line-height for body text is between 1.5 and 1.65
• Line-height for headings is between 1.1 and 1.25
• Body text is left-aligned (not centered or justified without hyphenation)
• Paragraph spacing is between 0.5em and 1.0em
• No text container spans full viewport width without a max-width constraint