Readability
Readability Preview
Test how readable your body text is. Set the font, font size, line height, measure (characters per line), and contrast to see a live preview and get instant verdicts on each readability factor. The goal is to find a combination that sustains long-form reading without fatigue.
optimal
65ch per line. Target: 45 to 75.
optimal
1.60. Target: 1.4 to 1.7.
passes AA
15.5:1. AA needs 4.5:1.
optimal
16px. Target: 14 to 18.
Typography is the visible voice of design. The right measure keeps the eye on the line, lets the reader rest at its end, and finds the next line without losing place. Aim for between 45 and 75 characters per line of body text. Robert Bringhurst set that range in The Elements of Typographic Style, and it still holds on the web today. A measure that is too narrow forces the eye to jump too often. A measure that is too wide makes it hard to find the next line. The line height, font size, and measure work together: a larger font size needs a wider measure and a tighter line height. A smaller font size needs a narrower measure and a looser line height. Test your combination at every breakpoint before you ship.
- Measure (line length)
- 45 to 75 characters per line is the conventional target for body text (Bringhurst). Below 45, the eye jumps too often. Above 75, the eye loses its place on return.
- Line height
- 1.4 to 1.7 for body text. Longer measures need more leading. Shorter measures need less. Headings can use 1.1 to 1.3.
- Font size
- 14 to 18px for body text on the web. Below 14px is hard to read on mobile. Above 18px is for large display or accessibility.
- Contrast
- WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
The Four Factors of Readability
Readable body text depends on four factors working together. The measure (line length) controls how many characters fit on one line. The font size controls how large each character is. The line height controls how much vertical space separates lines. The contrast controls how easily the eye distinguishes the text from the background.
The factors are interdependent. A larger font size needs a wider measure and a tighter line height. A smaller font size needs a narrower measure and a looser line height. A longer measure needs more line height to help the eye find the next line. A shorter measure can use less line height because the return sweep is shorter.
The conventional targets come from Robert Bringhurst's Elements of Typographic Style: 45 to 75 characters per line for the measure, 1.4 to 1.7 for line height, and 14 to 18px for font size on the web. WCAG 2.2 sets the contrast targets: 4.5:1 for normal text, 3:1 for large text. These are starting points, not rules. Test your combination with real content and real readers.