It’s now easier than ever to create your own website, but I often find that unless you have the experience, some things can slip through the cracks.
Whilst trying to balance the visuals, user experience, pages, and functionality, a really common issue that many tend to forget is the ability to actually read what is on the page.
Then, you get an email from Google Analytics, find it’s not converting, or even feedback from friends and it’s a real ‘doh’ moment.
So, I wanted to go through the easy mistakes you can fix right now that could be making the text on your website really hard to read.
It’s all about the (user) experience
How visitors feel about your website and how easy (or hard) it is to interact with it or find relevant information is known as user experience (UX).
You want potential clients to have a good experience on your website so that they convert, but they won’t do this if they have to work too hard for the information they want! And text size is a huge part of this.
Website mistakes are more costly now
Since everyone’s online nowadays, even the simplest website mistakes will cost you potential new customers!
By now, you’re probably aware you need to break up your text with:
- Bullet points
- Choose simple over complex terms
- And use plenty of headings and subheadings.
But it goes beyond the structure. Your font, your colours, even what you choose to highlight, play a big role in how people perceive your texts. They will have a hard time reading through your website if you:
1. Use a font size that is too small
Most books and other publications go for the 12px font size, and it seems only natural to use that same size for your website.
You need to go bigger.
A font size of 16px is the ideal size, and everything below it is just way too small.
It also depends on your audience type too (because doesn’t everything?!) If you’re marketing to an older audience or those with vision impairments, you’ll need to also consider if they need a larger font size. In this case, you could do with going up to 18px or above instead.
2. Get your background contrast too low
Putting everything into brand colours is also one of the most common website mistakes. It can be really tempting to make your main colour the text colour (or even the background!) but it can really affect the readability of your site.
The background colour affects how well people can read your text, so choose how you’ll use your brand colours wisely. Have secondary colours that you’ll use through the website, as well as accent colours that fit well with your brand’s main colour palette.
Your secondary colours should be neutral tones – white, shades of grey, and darker tones that you can use as background colours of text colours. The accent colours can be brighter and stronger, and will work well with the neutral palette when you want to highlight something. You can choose contrasting tones here as well to make prominent CTAs where you need them.
But don’t choose these colours blindly – you need to make sure they work well together! As with most things online, there are guidelines for this too!
The Web Content Accessibility Guidelines say that the contrast ratio (being the perceived difference in brightness between two colours) must be:
- For AA (minimum contrast) level: At least 4.5:1 for regular-sized (that means 16px) text and 3:1 for larger and bold text, like headings and your logo
- For AAA (enhanced contrast) level: At least 7:1 for normal text and 4.5:1 for large/bold text
Top Tip: Don’t worry, you don’t have to struggle with this on your own! Coolors has a great contrast checker that tests both small and large text contrast and offers enhancements!
3. Have a background that’s just too busy
Visuals make your website eye-catching, but are they a bit too good at what they do?
Using pictures as a background can be striking, but not great for readability. If what you’re typing is essential text, try to minimise the picture colours or make it more neutral by using an overlay.
If you take a look at my blog feature image you’ll see that I have a picture background with text but I’ve toned it down using colour overlays and opacity settings so the actual blog title is clearly visible and in the spotlight.
Please, please also avoid using a picture for the background of the blog or whole page. When trying to read a lot of text or blog posts, it’s too confusing, and hard to focus on text!
4. Having more than 10% of a paragraph highlighted
Speaking of spotlights, let’s touch on the topic of highlights. Ideally, highlights should emphasise certain words and phrases through each paragraph of your text, meaning they will be higher up in hierarchy. You can highlight by making these bold, italic, or underlining them, but you have to be smart about it.
If you bold, for example, people will only read the bold part. See what I did there? That’s why I tend to use it sparingly. Your website copy should be clear and succinct to begin with, so throwing in bold words and phrases too much simply means you have filler words you can remove.
Plus, having more than 10% of a paragraph prioritised this way defeats the purpose of highlighting altogether and just makes it harder to read.
Legibility is one of the more important SEO signals, so it’s not just about how users will feel about your low contrast ratios and too many highlights. Google cares about what makes users bounce from your website.
5. Adding multiple lines of centered text
Text alignment affects readability a lot! You might find that centered text somehow highlights that part of the text, but in reality, it might do more harm than good if you overuse it.
This is because, when you have to read centered text one after the other, you have to keep searching for the beginning of the sentence. Which isn’t enjoyable to read.
It’s also not great for accessibility!
The same goes for justified text – it might look neater but the spaces between words in each line are different so some readers might have a hard time following it.
6) Hide crucial info behind hover
Don’t hide important information behind a hover function, such as your contact information, location, or more information about your services. While it might provide a fun experience to some users, most users won’t appreciate being sent on a hunt for information.
It’s not a good idea for the sake of SEO either. When people can’t find information quickly and with relative ease, they tend to stop looking. What does this mean for you?
Higher bounce rates, lower conversions.
Besides, with so many people using phones to visit various sites, your site won’t do well with details hidden behind a “hover only” option. There is no hover for mobile (not yet, at least!)
For desktop, keep hover on an “as needed” use only. They are best reserved for tooltips. Indicate that there is a tooltip by putting an icon (question mark) next to it, and when people hover, they will see that information. For mobile, make sure that the icon is tappable so they can see the info as well.
7) Have too many animated elements
The quickest way to make a visitor lose focus is to have too many animations with each scroll. Animations are cool and can elevate your site above the rest, but use too many and the pretty moving pictures will steal attention away from what you have written on the website. In fact, they might even make some of your visitors sick!
As with adjectives that I’ve talked about in my previous text, less is more with animations too. Have one, max two, and make sure they help you drive your point across instead of taking the spotlight away, and that they are made well so that all of your visitors can enjoy them.
It’s also important to note that the more animated elements you have on your website the heavier (and slower!) it is too. Which is a whole other issue.
It’s the little things that make a great website
Website mistakes happen, but try to always remember the usability and readability come first! (yes even if it makes your website a bit uglier). Obviously the dream is to have both but if you’re on a budget or doing it yourself, always make sure your text is easy to read so you’re not missing out on conversions!
If you need help or don’t want to do it all yourself, get in touch and I’ll see how I can help!