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.
🔥
Practice this topic
Active recall - strengthens long-term retention