Text line length and height

The width of a line and the space between lines determine how comfortably users can move through content.

• Too long lines force the eye to travel far, making it harder to track the next line
• Too short lines break the flow, forcing constant jumps
• Too tight line height causes text to feel cramped
• Too loose line height breaks cohesion and slows reading

A balanced line length and line height improve readability, comprehension, and accessibility, making content usable for everyone.

Key techniques for setting line length and spacing that improve readability and accessibility.

Keep line length within 45–75 characters

The optimal range for body text is 45–75 characters per line (including spaces). This range is backed by research on reading speed and comprehension.

References:

• WCAG 1.4.8: Visual presentation
• Readability: The optimal line length – Baymard Institute

Set line height between 1.4–1.6 for body text

This range gives enough breathing room for comfortable reading without breaking cohesion. For headings, line height can be tighter: 1.1–1.3.

References:

• Typography – Google Material Design
• The elements of typographic style – Robert Bringhurst

Adjust line height per font and context

Different fonts have different x-heights and stroke weights, which affect readability. Always test line height visually and on multiple devices.

References:

• Practical typography – Matthew Butterick
• Thinking with type – Ellen Lupton

Use relative units for line height

Avoid fixed pixel line heights. Use unitless values (for example: line-height: 1.5) so spacing adapts to text size changes.

References:

• Line height tips – CSS tricks
• line-height – MDN

Frequent pitfalls that weaken readability when line length and spacing are poorly managed.

Overly long lines

Lines longer than 90–100 characters reduce comprehension and increase eye fatigue.

Lines too short

Text blocks narrower than 35 characters feel choppy and break reading flow.

Tight line spacing

Line-height: 1.2 or less makes text cramped and inaccessible, especially for users with low vision or dyslexia.

Excessive line spacing

Line-height: 2 creates “text islands” and slows reading.

Line length and line height define the rhythm of reading. Stick to 45–75 characters per line, pair with a line height of 1.4–1.6 for body text, and keep headings tighter.

Balance improves readability, reduces cognitive load, and supports accessibility across devices.

Scenario: Reading experience optimization

Use when setting line length and line height for any text-heavy interface: articles, documentation, forms, or dashboards, where readability directly affects comprehension.

You are a UX-focused design agent. Optimize line length and line height for [content type: article body / dashboard labels / form fields / documentation].

Rules:
- Line length:
  Body text: 45–75 characters per line (approx. 60–70ch in CSS)
  Below 45: too narrow, too many line breaks, disrupts rhythm
  Above 75: too wide, eyes struggle to find the next line
  Implementation: max-width: 65ch on text containers

- Line height:
  Body text: 1.5–1.6 (unitless — never px or em)
  Headings: 1.1–1.3
  Captions: 1.4–1.5
  Never below 1.4 for readable paragraphs

- Paragraph spacing: at least 1.5× the line height between paragraphs

- WCAG 1.4.12 Text Spacing: layout must not break when:
  Line height increased to 1.5× font size
  Letter spacing increased to 0.12× font size
  Word spacing increased to 0.16× font size
  Test this — your layout must reflow, not overflow

- Test with real content: never Lorem Ipsum
  Test with: maximum expected length, translated content (German can be 30–50% longer), user-generated content

Accessibility:
- Line height set as unitless number — inherits correctly across components

Constraints:
- Never allow text to span the full width of wide screens
- Never set line-height below 1.4 for body copy
- Never use px for line-height — use unitless values