Typography

Readability and Text Layout

Line length, line height, alignment, and spacing for comfortable reading

Key Insight

Readable text depends on four properties working together: line length (45–75 characters ideal for body), line height (1.5× minimum for body text), alignment (left-align body; avoid justified text on screen), and letter spacing (tighter for large display, standard for body). These are evidence-based defaults, not style preferences — they are derived from decades of readability research.

Key Points

  • •Ideal line length: 45–75 characters (about 600–700px at 16px body)
  • •Line height: 1.5× font size minimum for body; decrease as size increases
  • •Left-align body text — justified text creates uneven word spacing on screen
  • •Letter spacing: decrease for large headings (optical compensation); normal for body
  • •Text on photos: use a darkened overlay, text shadow, or solid background for legibility

Guidelines

  • ✓Set max-width on body text containers to enforce line length limits
  • ✓Use 1.5–1.8× line height for long body text; 1.2–1.4× for headings
  • ✗Avoid pure black (#000000) text — use near-black (#111 or #1a1a1a) for less eye strain
  • ✗Avoid light grey text on white below 4.5:1 contrast — common accessibility failure
  • ✓Test text legibility on photo backgrounds at multiple screen sizes

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics