5 web readability mistakes that you can solve today
It’s very common for designers (and business owners too) to forget some common principles when, well, designing.
The most important one is readability. It’s easy to switch from reading mode to visual mode and just forget about it.
That’s why this article is all about the most common design mistakes so that you won’t make them – or can solve them, if that’s the case.
Coming from an editorial design background, I know why fashion magazines are such a pleasant read and why newspapers limit column width instead of going across the whole page. And the same principles apply to reading on the web.
Hi! New here?
You love what you do and want to attract clients that love it as much as you do. My job is to help you to captivate your ideal clients through your brand and website so that they feel connected to you and trust you.
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.
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).
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:
“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)”. Is the one above better or you prefer longer sentences?
What about non copy related mistakes?
I can go on with this list but I want to make it easy to digest. So next time I’ll talk about images and all the juicy stuff that make magazines magical and infographics so interesting.
Let me know what mistakes have you found in your website in Captivating Communication™ Community on Facebook. Can’t wait to hear!