5 Simple Rules to Make Web Text Readable and User‑Friendly

Most websites cram tiny text onto small screens, making reading painful. This stems from a historical legacy when screens were genuinely small, not from any technical necessity.

Screen vs. magazine: not as big as you think (Wilson Miner).

Therefore…

Don’t force users to adjust font size

Users shouldn’t have to change their browser settings each time they visit a site.

Don’t claim cluttered pages look better

Overcrowded pages are unpleasant and do not aid usability; designers should pre‑filter important information instead of dumping everything on the user.

Don’t say scrolling is terrible

Scrolling is natural, like turning pages in a book, and is not inherently wrong.

Don’t downplay the importance of text

About 95% of web content concerns typography.

Don’t make users strain their eyes

Encourage comfortable reading positions rather than forcing users to lean into the screen.

Five Simple Rules

1. Use a standard font size for long text

The default browser size is already appropriate; designers should not require users to zoom in or out. Starting with a larger size may be harder, but it leads to cleaner, more pleasant layouts and eliminates the need for users to adjust settings.

2. Provide ample whitespace

Allow text to breathe; whitespace is not a matter of taste but of functional design. Proper line width and spacing reduce visual pressure and improve focus. Aim for 10‑15 words per line and keep line width around 50% of the viewport at 100% font size.

Good Nielsen – Bad Nielsen

3. Use friendly line height

Too small line height slows reading; too large also causes fatigue. A line height of about 140% is a good standard.

4. Ensure clear color contrast

Avoid low‑contrast combinations such as light gray on lighter gray, silver on white, gray on yellow, etc. For screen designs, a contrast like #fff background with #333 text works well, while extreme black‑on‑white can cause flickering.

5. Never render text as images

Text should remain selectable, searchable, and copyable. Images of text may look decorative, but they hinder communication, scalability, and accessibility.

—

Original source: http://informationarchitects.net/blog/100e2r/