The Importance of Readability on the Web

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.

Isometric website with book and glasses


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. 

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. 

Stripe documentation showing call-outs dividing lines and tables
Visual elements to chunk content in Stripe docs

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. 


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.

Readability in WordPress Themes

Posted by Web Monkey

Leave a Reply