8 Tips for Better Readability

We all know the importance of optimizing your web content to ensure it’s targeted, effective, and aesthetic. But often we forget about one of the main pillars of successful copy — readability. If your content isn’t reader friendly, there’s no amount of witty words that will get your message across.

When reading a book or an article in a magazine, we usually read word for word. Absorbing the entire text and then trying to filter out its essence. On the web, however, most of us scan information, jumping from one point of interest to the next, hoping to trip over some relevant facts.

In fact, according to a study by the Norman Nielsen Group, your visitors will only ready between 20 and 28% of the words on your site. Depressing, right?

So, to make sure your users are getting the most out of the content they do read, we’ve put together 8 guidelines to improve readability and, ultimately, enhance the conversation with your visitors.

1. Choose fonts wisely
Let’s start with the most essential part of any written content. At the early beginnings of the web, font faces and styles were defined by the web browser of the user. Only with the establishing, and eventual standardization, of the <font> tag in HTML alongside the introduction of web fonts, did web designers gain some control over the text presentation.

Now, is that a good or a bad thing? Standard fonts were limited, but at the same time, there was less room for bad design choices. Creativity can easily be at the expense of good readability.

fonts-that-you-should-never-use08

So, what should you consider when selecting a font?

Headlines should be easy to scan, but usually, they aren’t very long so you can go for a more creative font here. Just make sure to use both capital and lowercase letters, as the difference in letter height makes scanning easier.

For longer texts, you should use clear sans serif fonts. While serifs help the readability in printed media by supporting the reading flow, they do the opposite on the web. On screen, the little serifs can easily blur together, making it more difficult to read the text.

Standard sans serif fonts that are easily readable on screen include Arial, Helvetica, Trebuchet, Lucida Sans, and Verdana. The last of which was actually designed specifically for the web.

2. Font size matters
Nowadays, we must design for a wide range of devices and screen resolutions. So while a fixed font size, defined by pixel, might look great on a large desktop screen, it is probably way too big for mobile. What’s more, people prefer different font sizes depending on their age, eyesight, and personal preferences.

Some argue that 16 pixels is the perfect font size, while others agree that you should use percentages rather than fixed heights. Percentages adapt to personal browser settings and different screen resolutions. Just keep in mind that people are usually further away from their screen than they would be from a book. In fact, the recommended distance between eyes and monitor is 28 inches.

Screen Shot 2017-05-04 at 12.11.37

Creative agency Snask, isn’t afraid of going big on their homepage.

3. Opposites attract
Another very important point to consider is the contrast between background and text. The better the contrast, the better the readability. For example, you want to avoid bad color combinations, such as blue on red, or white on yellow. Too little contrast makes it very tiring to read a text, especially if it’s more than just a few lines.

Also, noisy background images can decrease the readability tremendously – which we can actually see in the Snask image above. When working with background images, make sure to only place text on areas with sufficient empty or white space. You can also work with an extra layer between image and text to separate the two.

4. Keep it short
Next, let’s take a look at the text as a whole.

While we don’t mind reading longer lines in print media, the optimal line length on the web is considered between 50-60 characters. If you make your lines much longer, your might scare your visitors off. Besides, long lines make it more difficult to focus and to correctly jump from one line to the next.

Screen Shot 2017-05-04 at 12.24.02

Online magazine, The Pool, starts each article with a clear header, a slightly longer subheader, then eases the reader into a flow with body text set in lines that do not intimidate. So, although the reader knows they are in for a 4-minute read, it feels like an achievable and enjoyable task.

5. Don’t be afraid to hit ‘enter’
Reading from a screen is tiring and can take up to 25% longer than reading a print text.

We already know about 75% of all people don’t read a website word for word. Rather, they scan through it quickly, looking for relevant nuggets of information. Considering the countless alternative websites out there, make sure you grab your visitor’s attention before they decide to leave and continue their scanning elsewhere.

Short paragraphs allow readers to quickly go through your content by scanning one paragraph at a time. If there are no relevant keywords included, they can simply continue to the next one.

6. Get straight to the point
Something that might not strike you as super relevant to mention is the conciseness of your writing. When writing for offline media, it’s easy to ramble about something simply because we can. Or maybe because we want to give our readers as much for their money as possible.

On the web, it’s different. Your readers are lazy, or at least 75% of them are, and they don’t care too much for pictorial language. They want to quickly find what they are looking for. If that means scanning all the text there is, then make sure you keep it brief and to the point.

7. Nobody’s got time for jargon
This best practice actually goes hand in hand with the previous one. Web users want to quickly scan your site and identify relevant aspects.

It’s out of the question that expertise is important for others to trust you, but expertise doesn’t mean you know something that others cannot understand. Actually, it’s the other way around. You become a respected expert if you know how to explain your field of expertise to others.

Take a look at Dutch bank Bunq, who successfully uses colloquial language to explain its concept in a simple and approachable manner.

Screen Shot 2017-05-04 at 14.21.08

If you intimidate your visitors, you give them the impression you don’t want a personal relationship. However, personal contact is exactly what adds to your credibility and long-term relationship with your users.

8. Break it down
Considering the scanning behavior of most web users, there is a selection of formatting elements you can include to ensure this process is as effortless as possible.

First of all, make sure you highlight relevant keywords to identify the main point per paragraph. In general, you should try to highlight one word or phrase per paragraph, but not more.
Second, use lists to structure your content. Lists are very easy to scan and a great way to show how different items relate to each other. For example, numbered lists can be a clear way of describing a step by step process, without having to tell a whole story.
Last but not least, images help people to stay focused and get through your content. Use images that support your content and encourage people to read the text that accompanies.
Takeaways
The way you style and structure your content is of utmost importance when it comes to effectively communicating with your visitors.

More often than not, web users are multi-tasking and only a small percentage will read the entire content piece you are presenting. The rest just scan through, hoping to trip over some relevant details. In order to satisfy both groups, it’s essential to optimize the readability of your web content.

Improve readability by carefully considering font choices, keeping your copy concise, and offering sufficient anchors for effortless scanning.