Readability on the web has to overcome many hurdles. Even if you follow all the right conventions, the presence of digital ads, popups and click bait can all distract from the main content of your site. But how do they impact readability? How can you use design to improve it? Below are some ways of thinking about readability on the web.
“Good design is about effective communication, not decoration at the expense of legibility.” – Vitaly Friedman
The Basics: Big, Legible Text
Rather than using specific pt sizes, consider relative length units like em to better scale to different device sizes.
To ensure visual contrast and accessibility, look to W3C’s guidance of using a contrast ratio of at least 4:5:1 between text and background. Remember that the contrast standards are a set of guidelines. In reality, users will be using a variety of devices in a number of environments (low light, night, etc.), perhaps in addition to different browser or OS color filters. So strive to meet the standard contrast guidelines but know that real life may present even more barriers to visual contrast.
![]()
Typography
Typographic Readability and Legibility
Jeremy Loyd
![]()
Accessibility
Designing Accessible Content: Typography, Font Styling, and Structure
Carie Fisher
Maximize Clarity: Cut the Lingo
By understanding how people read on the web (hint: they don’t read, they scan), you can write in a way that maximizes clarity. Avoid lengthy sentences or over-reliance on terminology.
The edge case is when you are writing to a specific industry–there may be common terms to your audience which should be vetted through usability studies. A common pitfall is to use terms or acronyms that are familiar to your working group, as opposed to working with what matches your audience’s mental model.
More Clarity: Chunk Content
When you do run into cases where there is a large amount of content on a page, try to organize it by chunking. Whether it be through visual design (like adding space, dividing lines, background color, indentation or typographic elements), to different forms of content or grouping similar pieces of content, all of forms of organization can aid comprehension and avoid giving the impression of a long, intimidating block of text.
Besides words, things like diagrams, charts, tables, and call-outs can also help emphasize key takeaways or calls to action for your readers.
Clarity Through Reading Patterns
On the web there are several common scanning patterns, some well known ones shown through eye tracking studies include the F-shaped pattern and the Z-shaped pattern for reading on the web. Knowing how the eye moves around a page can help you prioritize putting more important information on the upper left and above the fold, as that’s where your eye goes first.
![]()
Design Theory
Understanding the F-Layout in Web Design
Brandon Jones
![]()
Design Theory
Understanding the Z-Layout in Web Design
Brandon Jones
Conclusion
Finally, consider your readers’ goals on the page: what makes them successful by reading this page? What is the context? By bringing forward useful content and respecting the time of your user with brevity and clarity of information, you help optimize the reading experience and practice better design.
