A Well-Read Website
Author
Véronique Pelletier
Date
March 12, 2018
We’ve done a few projects now with text at their core. Most recently, we’ve brought The Sun magazine’s impressive and thoughtful print archive from the warehouse to the web, and worked with eCampus Ontario and Pressbooks on the UX design for Open Source Textbooks and the network where they are housed.
Plank’s Creative Director, Jennifer Lamb, and Junior Interactive Designer, Véronique Pelletier, put their heads together to share some recommendations for creating an online reading experience that is enjoyable and accessible to a variety of users.
Column Width
Just as in print, your on-screen column width is an important factor in readability. Too long and your reader will have difficulty focusing, too short and you break the rhythm by making the eyes work too hard traveling back and forth. Most sources recommend a line of text between 50 and 75 characters, but it’s a balancing act. On desktop, it’s ok to go a bit beyond, up to 100 characters, and faster readers will appreciate a longer line if it means less scrolling.
Fonts
Font choice and size also plays an important role in readability. Serif fonts dominate the print world and are said to maintain a sense of “flow” that draws the reader into longer texts. On screens, sans-serif fonts were traditionally the go-to because low resolutions didn’t render serif fonts properly, causing the letters to bleed into each other. As screen resolutions grow increasingly sharper, designers’ options are expanding to include a wider array of serif typefaces as well.
It’s a good idea to test your font choice on a variety of screen resolutions, as they can render quite differently. For readability, it’s best to stick to practical type choices over stylish or unique ones.
Font size should be somewhere between 14 and 20 pts and must be adaptable to mobile and tablet. Body text on a desktop is usually fine at 16 points but needs to be boosted up to 18 points on smaller screens. Line spacing plays an important role as well – too close creates clutter and too far sacrifices focus. A good guideline is about 125% larger than the font size.
Layout
Removing distractions is of the utmost importance. Surrounding the text with whitespace helps the eye to focus. It’s not recommended to use a sidebar, but if you must have one, it helps to be able to hide it. Images can do a great job of illustrating the text, but should be surrounded with enough padding that they don’t crowd the words. Advertisements and other call-outs, if required, should be placed at the end of an article, or at an appropriate break in a longer text.
Accessibility
Making your content accessible to a wide range of users is one of the greatest advantages of publishing digitally. There are a lot of design and structural elements at play in creating an accessible experience for users with permanent or temporary functional limitations.
Just to name a few considerations, there are standards and guidelines for text contrast, colour usage and alternatives, limiting overwhelming animation and video, and creating a clear navigation system. Content alternatives are instrumental; audio should have accompanying text, and images should have descriptive captions. (We’ve included some resources for more technical info at the end of this article).
Your page template should be robust enough so that the layout doesn’t break even when the page is zoomed up to 200%. Page elements should be organized in a logical structure that can be read properly by screen readers and navigated by keyboard controls; it’s important to organize your HTML content hierarchically from a markup perspective. Screen readers will read everything: don’t force these users to sit through ads before they reach your content so make sure they’re sequentially arranged in your markup. Layout modes like CSS grid and Flexbox give you the control to visually re-organize your content blocks whichever way you want when fed back through the browser.
Other factors also affect accessibility such as page load speed, optimization across a range of browsers, time limits for tasks, and how easy it is to understand the writing itself. Language is an important consideration for accessibility, especially since icons aren’t recommended (screen readers skip right past them) and space is at a premium. Keep things clear and short.
Further reading
We’re always keen to learn more about creating enjoyable, accessible reading experiences online. Here are some articles and resources to check out:
8 Tips for Better Readability | Usabilla.com
Readability: The Optimal Line Length | Baymard.com
The Line Length Misconception | Viget.com
How to Make Websites Accessible | Ontario.ca
Getting Started with Web Accessibility | W3.org
Keyboard Accessibility Techniques | WebAim.org