Short guide to website readability

Have you ever came across a website that offers very good content and has good design, yet you feel uncomfortable while reading their articles? I know I have. Thus, I tried to find the main reason and think about possible countermeasures for such phenomena.

I won’t be tackling the topic of website design head-on. Instead, as I tend to work with written text, I will focus on website readability and include elements of web design when relevant. For those who may not know, the whole notion of readability is connected to written content. Higher readability also means better chances for the first-time reader becoming a regular one.

What you want to say and how you want to say it

If you are publishing a website, it simply means that you have something to convey. Doesn’t matter if you want to boost your company sales, share your cooking ideas or just have your own website full of funny cats (which makes the majority of the Internet). All of this content needs to be presented in simple and comprehensible, yet not boring way. That rule applies to both forms of the presented content and content itself.

Font types

The type of the font you use is important. And I mean like really important. Generally, the main text shouldn’t be written using fancy fonts. Don’t make the readers’ lives harder. Also, keep in mind that most of your potential readers will just skim through the text. If you really want to use one of your favorite fancy fonts, the titles sections are the place to do it. This way, you will have both easy-to-read and not too simplistic content.

Font size and line spacing

It isn't necessary, but it still may be a good idea to define font sizes in percentage that relates to the text size in body section (always defined in points, pixels, or em). This will make your website more responsive – remember that people use different devices and different web browsers with different settings. Luckily, many devices scale the text themselves which partially resolves the responsivity issue for you. Also, remember to make a clear difference in font sizes between main text and titles, because just using font types isn’t enough.

When it comes to line spacing (vertical distance between lines of text) it all depends on your design and text objective. For the body text, it may be wise to not go any lower than 120% of the point size and not any bigger than 160%. Still, the most important thing is to set the line spacing the way that will make reading easier and will look good.

Line Spacing Examples

Optimal line length

There are two main approaches to the optimal line length issue:

  1. Many professionals consider 50-60 characters per line as an optimal line length. When you make your lines too wide, it’s hard to keep focused on the text, especially for readers like me who like their browser fonts small. On the other hand, making the lines narrow leads to very frustrating and tiring experience of ‘Go back to the beginning right now’ and it can easily mess up reader’s rhythm.

  2. However, if you poke around the internet some more, you will surely find those that stay closer to the 100 characters per line. And, to be honest, it is still highly readable.

All in all, it depends on the overall design, the topography of your website and your personal preferences.

Keeping reader's attention

As an author who wants to be read, you need to keep your reader focused on the topic. Here are some suggestions on how to do it:

• To hold the reader’s attention you may want to use images, however, it is not necessary. Of course, the images you pick need to be content relevant, but not exactly content heavy. Just make me want to read the next paragraph. If you happen to use images and graphics, make sure you implement them clearly (leave some space between text and graphics) and that they will not slow the loading time of your website too much.

• Highlights are also a good way to make content clear and understandable. Just remember to highlight important words and phrases, not some random elements.

• Use listings. Especially, if your reader likes to scan the text first. It also makes your content more organized which is a perfect thing for step-by-step articles such as cooking recipes.

Contrast and background images

We all like our website pretty. Throw in some nice background in there. But be aware of the implication of messing too much with the background. Don't make it too chaotic or your text may be simply unreadable. Just keep a high contrast between text and the background. Some people like to read white text on the dark background; some prefer traditional, dark-colored fonts on white or very light backgrounds. Either way, keep the high contrast.

You can make your work easier by checking the contrast with one of many free tools available online. Additionaly, you can check if the colors you pick can pass the WCAG 2.0 tests (website accessibility for people with sight disorders). If the colors you picked passed the tests, you can be sure that the contrast will be high enough.

Free Contrast Checker Tool

The tip of the iceberg

I hope some of you will find these tips even a little bit helpful. However, if you thought you now know everything about readability I need to disappoint you – the ideas presented here are just the tip of the iceberg and was picked according to what is important in my personal opinion. Lastly, even the highest possible readability level won't do much good if the content itself is boring.

hire us

Let’s talk about Mobile Apps

We’d love to design, develop and release them for you.

Highest DevOps Standards

Our team wield the right skills to make things work.

Angular magic in the making

Most flexible development technology for stunnig results.

Web Apps cooked the right way

The ultimate combination of code, design and user experience.

Django REST Framework

TEONITE develops, supports and donates open source projects.