Tips for usable text on the web

After working on a number of websites I learned that making a good website, that is easy to read, is hard. There's a lot of stuff you need to think about. Even for things like choosing the right font size and spacing between typograhical elements.

In this post I've gathered up a few tricks that I learned while building websites. These 4 tips should help you to make better choices when it comes to picking font size and other properties of the text on your website.

<!-- more -->

Tip 1: Use an optimal line length

A line of text is only readable when you don't have to follow that line for too long. The human eye tends to wander when it encounters a textline that is a little too long. It means that when your textlines are too long, people will have to read the same line of text twice or even more than that to understand what the line is about.

When setting text on your website, make sure that a single line of text in an article is about 50 to 75 characters long. Any longer and people will have a hard time following the text. Any shorter and people will have to move too fast to the start of the next line.

Working towards an optimal line length means that you have to work with a fixed layout. A fluid layout will cause the line length to vary too much. Which in the end will cause usability issues.

Tip 2: Define a modular scale

Working with a line length between 50 and 75 characters is one way to make your articles more readable. Another way to make them more readable is by establishing a hierarchy in the article.

Everyone knows how to make an article easier to read by adding a few headings so that people know what certain sections are about and how the information on the screen is structured.

You can make this effect stronger by choosing the proper font sizes. To make the difference between text and a heading clear, you need to make the heading slightly bigger. But the big question is how big?

There are certain ratios that people consider pleasing to the eye. So when scaling your fonts, make sure you follow these ratios.

For example, 1:2, 3:4, or the golden ratio if you fancy doing a lot of math :-)

My personal favorite for calculating headings works as follows:

p = 12 => 12
h4 = 12 => 12
h3 = h4*1.25 => 15
h2 = h3*1.25 => 18.75
h1 = h2*1.25 => 23.4375

I choose the H4 headings to be the same size as the paragraphs. All the others are increased with a factor 1.25. Why 1.25? Well, it gives you sort of good heading sizes (as in you get sizes that aren't to whacky). It's still not perfect, but it does the job.

You can calculate this yourself, but again there's tools that do a very good job to make the process a lot easier: Font scale calculator

Tip 3: Compose to a vertical rythm

Another trick to improve usability of your text is to compose the text to a vertical rythm. When reading line after line, people will find it easier to read text when each line is spaced equally.

Vertical rythm sample

When you look at the image above you will notice that every piece of text follows the horizontal lines. Even headings that are larger than the space between the lines are still following the lines, by spacing them in such a way that the next line that follows is within the rythm.

Setting up a vertical rythm on your website requires some math. That may or may not be the kind of thing you want to calculate yourself. Luckely there are a few people around that made handy tools to set up a vertical rythm.

Tip 4: Contrast

The final tip to get the most out of your reading experience is about contrast. Having too little contrast means that people will have a harder time reading your article.

Contrast makes reading articles more comfortable for people without disabilities. It is even more important for people with disabilities, like low vision or color blindness.

W3C has several recommendations to improve contrast:

The easiest text to read is that of black on a white background. This may be a little too harsh for some people. This depends on how bright the screen is on the computer of that particular user. To make this effect a little less dramatic, you can go for a slightly lighter font color (like dark gray). As long as you follow a contrast ratio of at least 3:1 you readers will be able to read the text just fine.

Want to check if your font color is contrasty enough for people to read? Check this website

Final thoughts

While writing this post I realized that creating the perfect reading experience is a lot of work. I hope that you will find that making your website more readable is a lot easier with the tips and tools from this post.

I am more than happy to hear more about what you do to make articles more readable on your website(s). So comment below if you have any tips for me!

avatar

Willem Meints

AI Fanatic, Technical Evangelist, Microsoft MVP