Readability settings that work
| Setting | Guideline | Why |
|---|---|---|
| Text contrast | At least 4.5 to 1, or 3 to 1 for large text | The WCAG minimum for readable text |
| Body size | About 16 to 18 pixels on phones | Readable without zooming |
| Line spacing | At least 1.5 times the font size | Eyes find the next line easily |
| Line length | Up to about 80 characters | Long lines tire readers |
| Alignment | Left-aligned body text | Even spacing between words |
The spacing and line length figures come from WCAG's guidance on visual presentation. They are an advanced level, but they make any page easier to read.
How type and color build trust
Stanford's Web Credibility Project found that people quickly judge a site by its visual design alone. Cramped text, clashing colors and tiny gray fonts look careless. Calm, consistent type and a disciplined palette look like a business that pays attention.
Color also signals meaning. A consistent action color tells people what they can tap. Red for errors and green for success work as long as text or an icon carries the meaning too.
Common readability problems
- Light gray text on white backgrounds
- Text placed over busy photos
- All-caps paragraphs or long italic passages
- Centered body text across wide screens
- Fonts that turn thin and faint on phones
Good example. A financial advisor's site uses dark navy text on white, 18-pixel body text and short paragraphs with clear subheadings.
Bad example. A salon sets its prices in thin gold script over a photo of hair products. Customers cannot read the prices, so they call to ask or leave.
Read how to choose web fonts. Our web design team checks every color pair and type size against WCAG before launch.