We've learned a huge amount about print reading in the last 400 years.

When reading print text,
the following improve reading speed and retention:

• Higher contrast between the font ink and the background color
• Serif fonts for printing
• 8 to 11 words per line (column layout)
• Whitespace margins to the sides of the column (gutters)
• Minimal use of font changes inside text
  (minimize highlights, bold, italics for individual words)
• Consistent text alignment (flush left preferred)

But online reading is not like reading a newspaper, magazine, or book.

• Smaller chunks (large paragraphs become grey text blobs)
• Sans-Serif fonts for online content (use simple fonts for most information, headline fonts allow more freedom)
• Avoid full-width justification (variable spaces between words make content harder to read, especially for people with learning disabilities)
• Whitespace margins around paragraphs or bullets (makes it easier for the eye to track around the text and pick out phrases at the start and end of the block)

 

Scanning, not reading

Imagine a disinterested reader flipping through a print magazine.

They are scanning the pages looking for something interesting. When they find it they spiral around that attention point looking for ideas that build or explain further.

Most online reading is not reading, it's scanning and looking for language that matches their mental search filter.

Once they do engage, they are evaluating your content. Ruthlessly.

Here are some things that can help you improve online readability:

• Illustrations that reinforce text ideas, or simply look great can lead them to slow down and start reading
• Animation draws attention because our brains are evolved to pay attentions to movement... but it can also trigger banner blindness**
• They're often looking to match a mental key term - if we're explaining concepts use a variety of terms, and this also provides the reader context for terms they may not recognize
• They scan from the outside-in - eye-scanning data shows how readers look at the first and last lines of a block of text to decide whether the paragraph may have something useful
• Breaking up long paragraphs into small chunks - makes the content less intimidating and easier to scan, it also puts more terms on the 'outside' where a reader will find them
• They're not seeing words, they're reading phrases - breaking up thoughts into smaller chunks is more effective when you try to get an entire phrase on one line
• Topic clues in bold - starting a bullet or paragraph with the big idea helps the reader scan faster, gives them an improved sense of the organization, and can lead them to fully engage with detail
• It's a quid pro quo - we have to give the reader something of value to justify their time and keep them engaged
• It's an evaluation - if they have a poor initial experience they will go somewhere else, and there are infinite other places to go!
• They're coming from somewhere else - probably a Google search... they don't enter on the home page or follow the site flow, so we have also to lead them to related information and concepts from deep pages

Everything in the list is amplified for a smartphone user -
we scan faster, we're in a distracting environment, and we may not be able to see our screen well.

Organize information using page hierarchy
and related links to fit your reader's intent

Hierarchical information improves reading and retention. H1, H2, H3, section titles, color coding all help. Clear writing that is direct and simple also helps. Be generous!

When we think about the information and organization of our sites, we should begin with the needs of the reader-persona:

Why are they here?
If they are here from search, what else would they want to find?
What are they likely to be doing?
What would make them successful?

Try to carve away as much distraction as you can. If you are eCommerce always offer them a secondary call-to-action. They may not be ready to commit, but if there is no easy path to keep learning or browsing - they leave and our success rate suffers.

Column widths - if more than 15 words, increase line-height

If you have to use wider text columns, you really need to increase the line-height. Wide columns of text do not easily guide the reader's eye to the next line, resulting in confusion and slower speed.

To use a wider column with small text, add more line-height.

When you set text in a page (without using a table or div with width set), you can create a bad situation for readers with large monitors. Default line-height is too narrow for full width windows. But we can use max-width in CSS to control column width in large viewports.

Ironically, some of this was caused by mobile users and responsive code. Initial effort for responsive mobile layouts simplified everything to fit mobile resolutions. Adding content back for better desktop resolution experiences has been harder.

Which fonts are best?

Serif fonts and sans-serif fonts have been debated by talented psychologists and designers and there is no clear requirement. Serif fonts for print read faster if everything else is controlled - such as paragraphs in a book or newspaper - but we also see variety everywhere in magazines and people enjoy it.

Online there is a measurable improvement for non-serif fonts, but it's not a huge difference. The organization of information has more significant effect... keep reading!

Footnote:
Banner blindness is real.
I had a client that inserted a banner immediately above the navigation bar in a banking web application, with an immediate increase in support calls where their customers could not find basic functions...
 
Clients without banner ads weren't getting those calls.