Read Me! How to design for online readability

It has become something of a cliche among designers and creators to lament the shortest attention span in history, blaming “lazy” readers, who are said to be almost eager to get bored and switch for the next shiny thing as soon as possible. For instance, the average read-through rate on Medium is around 40 per cent — meaning that only two out of five readers who start an article actually finish it.

But what if the problem is deeper? What if the problem, which is posed as an ethical question, is in fact a matter of pure physiology? The team at Readymag design tool wrote a long-form editorial on the topic. This excerpt offers some insights.

Define and conquer

According to a seminal paper by Edgar Dale and Jeanne Chall, readability is “the sum total [...] of all those elements within a given piece of printed material that affect the success a group of readers have with it. The success is the extent to which they understand it, read it at an optimal speed, and find it interesting.” In other words, readability is a metric that evaluates the ease and comfort of reading a particular text.

French psychologist Louis Émile Javal provided one of the first known studies on the topic in 1879 with his paper On the Physiology of Reading. His key insight was that readers’ eyes don’t move steadily across the text; they actually make short, rapid movements, mixed with longer fixations.

Two other prominent approaches came in the middle of the 20th century. One was introduced by Miles Tinker and concerned the speed of perception, while another one by Matthew Luckiesh emphasised measuring overall eye fatigue. At the end of the day, Tinker’s idea transformed into the notion of legibility, the ease of distinguishing one letter from another as measured by perception speed. Luckiesh’s fatigue-based measurement became what is nowadays known as readability, the ease of reading a text as a whole — including layout, colours, etc. — measured using fatigue indicators like blink time. It can also be useful to distinguish the readability of a text (as a product of writing) versus the readability of text setting. The first primarily evaluates the skill of a writer, while the second has to do with design.

Going on screen

But for web readability that’s just the tip of the iceberg: text on the web is more difficult to read than printed. When they became mainstream in the second half of the 20th century, LED screens turned out to be more demanding on the eye of the reader, due to their inherent properties – backlight and limited resolution. Classical print fonts were insufficient in this new environment, and over the next decades, designers and web developers came out with a bunch of solutions aiming to ease the problem. This included anti-aliasing and hinting font techniques, special bitmap fonts designed to match the pixels of the standard screen resolution, subpixel rendering, Typekit font collection making use of the @font-face feature of CSS, and finally, variable fonts that could be modified along several axes, including their optical size, which directly affects font legibility.

Here are some simple rules to keep in mind when developing engaging texts and layouts.

1. Always start with quality writing. These steps might help you improve the quality of a text; scales, such as Gunning fog, can also help. Start building your design only when you know you have the best text possible.
   
2. Think about layout and seek inspiration in printed publications: the reader’s eye is already acquainted with books and magazines, making similar layouts easier to grasp. Browse through paper magazines for inspiration. Take note of the most appealing layout details and recreate those in your work.
   
3. Both printed publications and web layout are essentially based on columns and rectangles. Master the grid, a design device pioneered by the Swiss School to help balance layouts. Structure and divide your content into smaller elements, making them easier to scan.
   
4. Keep the contrast ratio tool developed by the Web Accessibility Initiative in mind and test your designs for contrast levels.
   
5. Pick appropriate fonts, particularly if you’re working with a lengthy text. Master font pairs to combine readable fonts for the main text with expressive ones for headers. Don’t forget the parameters of text setting: font size, line spacing, width of the text columns.
   
6. Give readers easy access to navigation tools, so they can stop for interruptions and start reading again later with minimal disruption. Anchor navigation might work especially well in long reads.
   
7. Play with the look and feel of your text, look for ways to emphasise where it’s most engaging without negatively affecting readability. Render some of the numbers as an image or a shape. Use unique fonts for headers. Use insets and hotspots to highlight certain sections of text. Balance text with images and animation. Give the reader’s brain something playful as a break from monotonous text—remember that it’s fatigue you’re fighting.
   
8. If your article is longer than five paragraphs, add an option for printing it out in a decent font for printed text — say, with some variant of Garamond.
   
9. Analyze everything. Use read-through levels as a proxy for readability: split a long text into different pages with separate names, then benchmark page views with a web analytics system. Send drafts with different layouts to acquaintances before publication and measure how much layout improvements impact read-through.

You can read more about all of them in the full version of Readymag’s project, which comes in the form of a free multivariate editorial template.