The answer to 90% of the website related questions is “it depends”.
It depends on your target audience, business model, even the age of your business.
But this one thing is for (dead) sure:
Want your website to generate business? People need to be able to read your text.
“Oh wow, what a revelation! I did not know that! #sarcasm“
Let’s see if you’re still that cheeky by the end of this post. Please enjoy…
7 Website Mistakes That Make Your Text Hard to Read
…ranging from “but I just want to emphasize this phrase” crazy formatting all the way to the “but I really like these!” brain-racking animations.
1) Font size too small
It should be minimum 16px. 18px for some types of fonts or older audiences.
This is Open Sans 18px.
16px may have been fine, if your audience is too young to have poor eyesight.
But here is Roboto 16px. I kid you not. It seems larger than Open Sans 16px and fine for most of the eyes.
And I think we can all agree that Open Sans 14px would be a no-go.
For a more user-friendly experience, consider using this easy-to-use font generator to find the perfect font size for your users.
2) Contrast to the background too low
How ironic is that: You’ve been obsessing over your tagline, header image and page copy but have never checked if people can actually read them with ease.
Given all the overlays, color backgrounds and text on images your website theme allows you to use, it’s easy to forget that readability comes first.
And what’s readable anyways?
Luckily, there’s an objective answer to that called “contrast ratio”.
It’s defined within Web Content Accessibility Guidelines (now say it fast 3 times in a row) and measures the difference in perceived brightness between two colors – foreground and background.
You should aim for a contrast ratio over 4.5:1 for normal and 7:1 for the large text. Don’t trust your website theme default colors (I’ve seen default settings fail this test many times).
You can check the contrast ratio for your text and background using Color Contrast Checker.
To find out what colors your website uses, install a free plugin called ColorZilla. It lets you find out any color of any website element, be it text, background or image.
3) Background too busy
Hello, text on images! Yes, also on fancy modern websites.
The example below has it all: Low contrast between the background and the text, plus too hairy busy background for the text remain easily readable.
4) More than 10% of a paragraph highlighted
A highlight is not bold, underlined, or italic. It’s something small that’s different from the relative larger rest.
So, if you highlight too much, you highlight nothing. Plus, highlights are frictions. And frictions are road bumps on the way of your prospects.
But I think we have a bigger problem here.
Why do you think you need to highlight the words in your copy? So that your prospects pay attention?
It’s just a paragraph of text! How bad is your copy that you think they won’t be able to read it in plain text only?
Highlighting words within paragraphs are a lazy (and ineffective) way to make your prospects read your copy.Click To TweetUnless reading only the highlighted words make sense, let your prospects read in peace, or they’ll be tempted to skip parts of your text, so your “attention retention shortcut” won’t even work.
5) More than 3 lines of centered text in a row.
It’s a mystery to me where this trend came from, but it’s like some virus that has now spread to almost every single website I’ve ever seen: Centered testimonials, multiple paragraphs of text, or even whole sections.
The thing is, it’s harder to read the centered text because every line starts at a different point, and your visitors need a moment to find the beginning of every line. This text – something you’re reading for the first time and not something you gloss over because it has been on your website forever – is supposed to demonstrate it.
So please, stop torturing your visitors and don’t center more than two lines of text. Deal?
6) Expecting people to hover over things to see the text
Yes, your prospects totally have the time to go on the scavenger hunt on your website and hover over they didn’t get the memo + hovering doesn’t work on mobile)
7) Extensive animations triggered every time you scroll
Remember how the slider carousels were “in” and then everybody couldn’t wait to get rid of them, because the studies started showing that they don’t get you more clicks on the content, don’t get your message across and are just plain irritating?
In case you need a refresher 👇
The king slider is dead, long live the king animation!
If the text is the least noticeable thing on your website because every time your prospect scrolls, stuff keeps flying in, jumping across, or swirling out, no one can’t concentrate on reading.
Having extensive animations on your website is like trying to make your kids eat their veggies while throwing candy at them.Click To TweetEvery time they:
- pause to look at another cute character that waves from the corner
- forced to look away from a line because next section “moves in” (lower than the text they’re trying to focus on)
- stop reading altogether to trigger that animation again “because it’s so fun”
…they ditch your copy – a carefully laid out conversation that was supposed to get them from where they are now to where they need to convert.
And unless you’re a web designer offering animation creation services, guess who won’t be getting a new inquiry?
For now, the google search results are filled with articles animating you to animate your website. But Normal Nielsen Group isn’t getting fooled by a trend:
When misused, animations intended to add aesthetic appeal slow down content consumption and get in the user’s way. […] Task-focused users don’t want to be wowed by a website — they want to get answers.
Sincerely, your NNgroup
Thanks for coming to my TED talk 😄
Final words of wisdom
Different fonts. Highlights. Delightful elements.
All of that has its place on your website.
But not when it comes before content.
Because colors, fonts and animations can’t persuade your prospects to get to trust you enough to click that call-to-action button if no one’s paying attention to the words.
These website mistakes we just talked about, how many will you find on your website? I bet at least one.
Reading your webpage is hard on eyes. The contrast ratio is perhaps less than 3. And you are teaching the world what mistakes the others make.
Not sure what you mean, Drac. My website is white on (almost) black (hex #3a3a3a). The contrast ration is 11.37. You can double-check it with the contrast checker from WebAIM here. If you feel like it’s hard on your eyes, maybe you should check the custom settings on the device you’re using.
Straightforward and logical. As always Gill 👍
Glad you found it useful, Paul 🙂
Hey Gill,
Thank you very much for the tips. I redesigned my blog on this article.
Hm, last time I read this article, I fund a few things to correct. This time it seems to be ok. Thank you, Gill, for all your good advice and for sharing them so faithfully with us.