While multimedia is becoming increasingly popular on the Web, there is no way around classic text to effectively communicate with your visitors. I admit, the Internet has been around for awhile now and you might think: “Text, don’t we all know by know how to handle it?” And I agree, we’ve had enough time to internalize the basics about written web content. For some reason, however, there are plenty of sites that still struggle with their text presentation.
A while back we looked at how to write successful web content and we gained insights into how to make content targeted, attractive, and effective. Now, let’s zoom in closer and look at how you can make sure that your content is readable. Did you know that reading online is 25 percent slower than reading from printed material? According to a study by Nielsen, your visitors read only between 20 and 28 percent of the words on your site.
When reading a book, or an article in a magazine, we usually read word for word, absorbing the entire text, trying to filter out its essence. On the Web, most of us scan information, jumping from one point of interest to the next, hoping to trip over some relevant facts. Here are 8 guidelines that will help you improve the readability for your content and ultimately improve the communication 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 introduction and eventually the standardization of the <font> tag in HTML, web designers gained some control over the text presentation. Still, defined fonts had to be installed on the user’s computer, which could be a challenge due to different standard fonts on different operating systems. Only with the introduction of web fonts, designers are free to use any font they like for their designs.
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. For example, the other day, I was asked to do a brief UX evaluation of different travel sites for the TTG Virtual: Technology. I came across the site Black Tomato, which has a beautiful and very appealing design. However, they use the font SteelfishRegular for quite a lot of content, which is really difficult to read, let alone to scan.
Contact form of Black Tomato, using a badly readable web font.*
So what should you consider when choosing a font for your content? Of course you can differentiate between headlines and actual content. Headlines should be easy to scan, but usually they are not very long. So you can go for a more creative font here. Just make sure to use both capitals and lowercase letters, as this 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, because they supports the reading flow, it does just the opposite on the Web. On screen, the little serifs easily blur together, making it more difficult to read the text. standard serif fonts that are easily readable on screen are for example: Arial, Helvetica, Trebuchet, Lucida Sans, and Verdana. Verdana has actually been designed specifically for the Web.
2. Font size & line spacing are important
Next, there are font size and line spacing that add to the readability of your content. Nowadays, you design for a wide range of devices and screen resolution. While a fixed font size, defined in pixel, might look great on a big desktop screen, it is probably oversized for a mobile phone. Also, people prefer a different font size depending on their age, eyesight, and personal preferences.
Some argue that 16 pixel is the perfect font size, while others agree that you should use percentages rather than fixed heights. Personally, I also think that modern web design requires a more flexible and modifiable approach. Percentages adapt to personal browser settings, and different screen resolutions. Most browsers have a default font size of 16 pixel, so most of the time 1em equals 16px.
The site Mail Travel could improve the readability by adding some line spacing.
However, the fact that most browsers suggest 16 pixel as default font size, does not mean it is ideal for your visitors. You can go for less, 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.
Obviously, the line height depends on the font size you choose. However, it might already be good to know that the standard line height is usually too small. More room means more clarity, and as that a better readability.
3. Use high contrasts
Another very important point to consider is the contrast between background and text. The better the contrast, the better the readability. For example you will 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. When working with background images, make sure to only place text on extremely blurry, or unruffled places. You can also work with an extra layer between image and text to separate text and background.
4. Keep lines 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 visitor off because the reading ultimately looks like more work. Besides, long lines make it more difficult to focus and to correctly jump from one line to the next. However, if you make your lines much shorter, the eye is tempted to back and forth too quickly, breaking the reader’s rhythm and possibly skipping essential words.
A great way to get people started with reading is to start with short lines. For example, Smashing Magazine always place an ad at the very top of their articles. This way, the intro becomes compact and inviting. Then, once the reader is hooked, the text expands to make the reading more comfortable.
5. Keep paragraphs short
As I mentioned before, reading from a screen is tiring and takes 25 percent longer than reading a printed text. About 75 percent of all people don’t read a website word for word. Rather, they scan through it quickly, looking for relevant bits and pieces of information. Considering the countless alternative websites out there, you will want to make sure you grab your visitors’ 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 with 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, we easily ramble on 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, this is different. Your readers are lazy, or at least 75 percent of them are, and they don’t care about too much 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, and go without redundancies that only point out what you already said elsewhere.
Also, simple sentences are much easier to scan than long, complex sentences. Try to start a new sentence for every point you make. This might be difficult to get used to, but don’t worry about sounding ridiculous. People like short sentences that don’t require much thinking and you can still say really smart things with them.
7. Don’t use jargon
This guideline actually goes hand in hand with the one before. 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.
People will actually like you more, and at the same time trust you, if you don’t exaggerate only to prove that you know your field. If you intimidate your visitors, you either scare them off right away, or keep them at arms’ length, giving them the impression you don’t want any personal contact. However, personal contact is exactly what adds to your credibility and long-term relationship with your visitors.
8. Use highlights, lists, and images
In line with the scanning behavior of most web users, here are some more things you can do to help your visitors scan your content successfully.
- 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 focussed and get through your content. Use images that support your content and possibly trigger people to read the text that goes with it. At least, you should make use of image captions as they are popular reference points when scanning through a text.
Conclusion
The way you style and structure your content is of utmost importance to whether or not it helps you to effectively communicate with your visitors. Web users are lazy and only a relatively small percentage really reads the content on your site. The rest just scan through, hoping to trip over some relevant details. In order to both satisfy the small group of truly interested people, and the lazy majority, you need to optimize the readability of your web content.
You can improve the readability by optimizing your font and line height, by keeping sentences, lines, and paragraphs short, by keeping your content to the point, and by offering sufficient anchors for easy scanning.
Source: Usabilla Blog
Author: Sabina Idler
