5 web readability mistakes that you can solve today

The most common design mistakes that make people give up on reading

Think about Medium articles. Why they’re so easy to read?

Hint: it’s the design.

Here’s the list of what to avoid:

1. copy doesn’t have the right amount of Contrast 

Some designers and templates use light gray copy on white background. Low contrast looks good, but it’s better to keep it for things you don’t have to read, like patterns.

Not all screens are equal and it might be painful to read light gray copy in low contrast monitors.

The same applies to body copy over a crazy bright background or the copy itself in crazy bright color.

Body copy doesn’t have to be black or dark gray. It can have a color, but make it more muted. 

Example

Try to read this. Are you trying? Really annoying, isn’t it. And this isn’t better either. It kinda works for short sentences but imagine reading a full article like this. Your eyes hurt. Making it a bit more muted solves the problem. Can you see the difference?

2. Using a font not meant for body copy

There are fonts meant for body copy and fonts meant for headlines (and some should be neither, if you ask me).

If you pick a font that looks good on headlines for body copy it will be hard to read and weird to look (check bellow).

Example

This is Abril Fatface. Abril is an AMAZING Magazine style font suffering in this tiny size.

This is Abril in 36 px. Now she’s happy 🙂

This is Berkshire Swash. A very distinct font suffering in this tiny size.

This is Berkshire Swash in 40 px. Now you can see her whimsical style.

Next I picked a few good fonts for body copy. Those are not the only ones, just a few examples.

3. Font size and space matters

The rule of thumb is fonts must be at least 16 px for screen reading. AT LEAST. Depending on the font you chose, 16 px is too small. I believe most fonts need to be at least 18 px and 16 px for mobile. Some even bigger.

Minimun space between lines (line height) would be 1.5. But usually you get better readability with something between 1.6 and 1.8 line height.

But check your font. For example: although Lato and Crimson Text are good fonts, they look smaller than Raleway or Marriweather. So you need a bigger size for the same effect Check bellow.

Examples (a lot of them)

This is Lato 16 px with 1.5 line height. This is what would be acceptable by rule. It’s not awful but not particularly great either. I wouldn’t keep reading for long and I wouldn’t expect you read this either. But some websites go even smaller than this.

This is Lato 19 px with 1.7 line height. Better, right? If you compare with printed copy, this looks a lot like 12 px font in paper. Since it’s usually easier to read on paper, copy on screen need to be at like this so that it’s easy to read when your eyes are far from the screen.

This is Raleway 18 px with 1.9 line height. Looks a lot like Lato 19 px. This is one of my personal favorite fonts to read on screen.

This is Merriweather 18 px with 2 line height. Looks bigger then Lato 19 px although it’s one point smaller. This is one of the best fonts to read on screen in my opinion.

This is Crimson text 18 px with 1.7 line height. Looks a lot different than Merriweather but it’s the same size! It’s a great font to get that book feeling, but you need to go bigger than this.

This is Crimson text 22 px with 1.7 line height. Now, this is a size that you can read for a long time without getting tired. See why you need to adjust depending on the font?

4. Cluttered website with no white space

White space allow readers and visitors to breathe. It’s the space between paragraphs, the sections on your page and even the white space on the sides. No one likes to read corner to corner of a page. (More on that in the next mistake.)

It makes your content more organized, so think about that when breaking your content. A few questions to ask yourself:

Where the reader needs time to process information?

When a pause would be good?

Do you need to have a long paragraph or can you break it making each idea stand on its own paragraph?

5. Line length is too long

This is why magazines and newspapers have columns and one of the reasons magazines are such a pleasant read (there’s more to it).

Line length is so important for readability there’s even an optimal character count for that: 66. Research shows anything between 45 and 75 characters including spaces it’s a good line lenght. Of course it depends on the font size and the width to make the line length.

I trust my eyes on this one. In this blog you’re reading something around 80 and 89 characters long (if you’re on desktop).

Medium articles (the best reading experience on web example) have around 72 and 80. I believe you’re fine between 45 and 90.

It’s easier to limit the width of your copy then the character count so my rule of thumb is it will be never larger than 780 px.

The problem is that I see this in 3 out of 5 blogs from business owners go larger than that and have smaller font sizes too (I’m making the number out of my head but that’s about it).

Try to read the sentence below and compare to the one above: