Body text is where readers spend almost all of their time, yet it often gets less attention than the headline or the hero image. Three settings do most of the work: size, line height and contrast.
Size: start at 16px, aim higher
Browsers default to 16px, and that should be your minimum for body text. For long-form reading, 18px is often more comfortable, especially on large screens where people sit further away.
On phones, keep body text at least 16px. Smaller text forces readers to pinch and zoom, and some browsers zoom in automatically when a form field is smaller than that.
Line height: give the text room
Line height (leading) controls the space between lines. Too tight and lines blur together; too loose and the paragraph falls apart.
- Body text: 1.5 to 1.8 times the font size.
- Headings: tighter, around 1.1 to 1.3, because they are short and large.
Contrast: dark enough, not pure black
Text needs enough contrast against its background to be readable in bright light and by people with low vision. The WCAG guideline is a contrast ratio of at least 4.5:1 for normal text.
Pure black on pure white can feel harsh on bright screens. A very dark grey, such as #374151, reads just as clearly and is easier on the eyes.
Putting it together
| Setting | Phone | Desktop |
|---|---|---|
| Font size | 16–17px | 18px |
| Line height | 1.6 | 1.75 |
| Line length | full width | 60–75 characters |
Set these once in your stylesheet and every article benefits.