Website hard to read? Here are 4 key areas of website readability you could be overlooking

Bad website readability builds a wall between your content and your readers. So if your website is difficult to read, visitors will struggle to engage with your brand.

This issue affects all your website users, but even more so those with sight impairments, colour blindness and learning difficulties.

Accessibility is about ensuring everyone has access to your brand regardless. This doesn’t mean you can’t target a specific audience. It just means not actively excluding people.

This article will cover four key areas of website readability you might be overlooking:

  1. Colours
  2. Fonts
  3. Layout
  4. Language

All of these have an affect not just on website readability, but also accessibility and the effectiveness of your marketing.

1. Colours: too bright or too indistinguishable

It’s estimated that over 253 million people live with visual impairment, and 1 in 8 men, and 1 in 200 women are colour blind.

One of the easiest ways to exclude these people, and others, from your website is by having incompatible font and background colours.

A dark background with a dark font is the most obvious example. If your site has a black background, you want to make sure the text is bright enough for your visitors to read.

Take a look at Netflix:

Netflix is careful about making their site as readable as possible, even with limited text.

The page is primarily filled with images but the small amount of text they use is bright, clear and easy to read.

However, you don’t want to go overboard with bright colours as they can be really jarring. Not only to the visually impaired and colour blind, but to all other visitors as well.

Now look at Fabric Land’s old website:

Worst website ever? Fabric Land’s eye-burning website.

Clearly there’s a lot wrong with this site, but the first thing to hit you is the horrific wall of bright yellow. This is an extreme example of what could be happening on your own site.

Thankfully, Fabric Land have updated their site and it now looks like this:

Fabric Land’s new website, although not perfectly accessible, is vastly improved.

Restricting the blinding yellow background to a single strip, and softening its colour, has improved the site tremendously. Not to mention the crisp white text over the colourful images and the dark blue over the white.

As I said, this is an extreme example. It doesn’t necessarily help you determine whether your site is guilty of a subtler version of website colour crime.

That’s where WebAIM comes in. Using this tool you can check whether your site’s font and background colours meet the Web Content Accessibility Guidelines (WCAG).

All you have to do is type in the hex code for your font and background colours. WebAIM then tells you whether these colours are rated AA or AAA.

You can test out the readability of your text against your website background using WebAIM’s contrast checker.

If your colours fail this test there isn’t enough of a contrast between your fonts and background, meaning it’s time to reconsider your website design.

2. Fonts: too small or too over-the-top

The size, typeface, and style (i.e. bold, italic, regular) of fonts also affect your website readability.

One of the biggest offenders is tiny writing. Take the New Zealand news website, Stuff, as a prime example:

Stuff news would benefit hugely from an increase in paragraph font size.

The text on this page is way too small. It strains my eyes to read, so it goes without saying it’s completely excluding many readers with visual impairments.

As well, certain typefaces are difficult to read and can look dated. It’s better to keep it simple, clear and familiar. So if in doubt, Arial or Helvetica are good choices.

If you use a serif typeface, the hooks at the ends of the letters might obscure their shape to someone with dyslexia, something that can be corrected by switching to a sans-serif.

Coda Psychology’s website is a good example of using large, clear, easy-to-read fonts, plus good design and clear copywriting to effectively reach an audience:

An Unramble-built website with succinct copywriting, clear fonts and user-focused navigation. 

With their target clients ranging in age from 16-80+, their website needed to be simple to navigate, immediately convey their brand message, and lead users to the contact page as quickly as possible.

Alongside an ad campaign, Unramble created their website, branding and content. The result? They had their first clients rolling in within a week, their website continues to be their primary source of clients, and they’ve increased their office hours to cope with demand.

You really can’t go wrong with good website readability.

3. Layout: too hard on the eyes

There are three main layout components which can make or break website readability: white space, text-alignment and spacing between paragraphs. Let’s look at those in more detail now.

Use of whitespace to draw in readers

Whitespace, also called negative space, is essentially the blank space between copy, images and other elements on a website.

Whitespace doesn’t have to be white. As long as there are no graphical elements in that space, it fits the bill.

If you want people to focus on the content of your website, it’s a good idea to surround it with whitespace so they know where to look.

Take The Spectator website as an example:

The Spectator website makes excellent use of whitespace.

All the information is funnelled down the middle by the bands of whitespace on either side; your eyes are drawn to the title, and down through the article headlines.

Whitespace between letters and separate elements, known more specifically as micro whitespace, is also important.

In a blog post on white space, Mark Boulton gives the example of The Economist news site. News sites often struggle to find whitespace because their content is so dense, so The Economist had a web designer add whitespace to the individual characters of their font.

They were therefore able to make their content feel lighter and easier to digest without sacrificing its density. A neat little trick I have to say.

If you opt specifically for white whitespace (as many do), it’s important to note that too much white can actually make it more difficult for some people to read your website. This is especially true for those with dyslexia. For others it’s a matter of preference – they just prefer a dark background with light writing.

If your website adheres to the WCAG guidelines I mentioned above – ensuring a good colour contrast between your background and text – you’ll be fine. Users who want/need a dark background can invert website colours by editing the accessibility settings on their device or web browser.

And, if you want to be even more helpful, installing a WordPress plugin – such as WP Accessibility Helper – lets users edit these settings right from your website.

Left aligned text for easier reading

Centring paragraphs of text disrupts website readability dramatically, especially for people with dyslexia.

The starting point is different for each line in the paragraph which means people have to work harder than usual to read it:

Big blocks of centred text is a nightmare to read – left aligned is much better.

Centred text is better reserved for headlines or short lines of text to make your layout look balanced and symmetrical.

Justified text is also difficult for people to read. This is when each line in your web page is the same length (except for the last) with the text spread out to meet the uniform line width and to align with the left and right margins:

Justified text is tricky to read, especially if you have dyslexia.

It doesn’t look that bad at first glance but the differing amount of white space between words creates the same problem as centred text: you have to work a lot harder to read the sentence.

The World Wide Web Consortium (W3C) stated that: “Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read.”

Your best bet is to stick with left alignment for all the paragraphs on your site if you want to reach your maximum possible audience.

Bonus tip: Have you ever noticed that some websites have text that spans nearly the entire width of your browser window? Long line lengths like this force readers to waste extra time and energy finding the next line of text, making it harder for them to absorb the actual words. We recommend a maximum line length of around 600px to avoid straining your website users’ eyes.

Spacing between paragraphs to make chunks of text less daunting

When I studied for my journalism qualification there were very strict rules as to how many words we were allowed to use in a sentence and every sentence had to be separated by a blank line.

This is because it forces you to keep your points concise and it breaks up huge walls of text into easily digestible chunks.

It also reminds the readers that every new sentence, or paragraph, is making a fresh point from the one that preceded it.

Let’s look at the difference between articles on the BBC News site and The Guardian.

This BBC article is easy to read, you’re aware that you’re learning something new with every sentence and it looks clean and professional:

BBC is nice and easy to read thanks to plentiful paragraphs and large, clear fonts.

The Guardian, however, has taken the wall of text approach and it’s much more difficult to see where each new point begins:

The Guardian could do with a few more paragraph breaks and headers.

In fact, BBC articles are so easy to absorb I often find myself reading them without even thinking about it. When I glance at a Guardian article I think to myself: “oh boy, better put some time aside to read this.”

The lesson here: If you want people to engage with your brand, make it as simple as you can for them.

4. Language: too flowery, or too difficult to follow

Aside from what your website looks like, you should take the language used into consideration. To understand which language is best, it’s important to understand who your audience is.

If you’re aiming your content at people within a definite niche, e.g. a specific scientific field, then it might be appropriate for you to use complex language. Most of the time, however, it’s better to keep it as clear and simple as possible.

I’m a big fan of George Orwell and in his essay, Politics and the English Language, he lashes out at writers who use flowery words and phrases to make their work appear more intelligent than it actually is. In fact, all it does is exclude readers from engaging with the intended message.

A great example of good language choice is GOV.UK. They’ve overhauled much of their website to make it clearer to a wide audience. This makes sense considering it needs to be accessible to everyone in the UK.

The GOV.UK website ticks all the good readability boxes.

They go to great lengths to identify what a user might need and design their content to ensure the user is able to reach their goals. This might be anything from registering to vote, to applying for a driving license, to finding out information about pensions.

They make the point that their content in these areas is “written from the user’s perspective and in language that a user would recognise and use themselves.”

Plus, as you navigate the GOV.UK site you notice all the other elements we’ve mentioned in this post: plentiful whitespace, clear sans-serif font, black font on a white background and short, snappy sentences separated by blank lines.

Using accessible language doesn’t mean you can’t target content toward a specific audience. With a clear message and excellent copywriting, you can target any audience you want.

The Economist target an audience who “tend to be forward-facing, keenly interested in events abroad, interested in the impact of technology on the world, are career-driven, ethical and like a challenge.”

Despite this highly educated target audience, they still have very firm rules to maintain clarity and ease of reading. They even published their own style guide with an emphasis on saying what you want to say, and saying it simply. Orwell would be proud.

Website readability: easy to overlook but super important 

Has this article opened your eyes to some of the areas of website readability you’ve previously not thought about?

Although issues like the space between paragraphs, and font size might sound relatively minor on paper, the effect they have on your readership is anything but.

Improving your site’s SEO has become a major focal point in recent years and I believe website readability is just as important.

Increasing traffic to your site is desirable, however, it’s imperative to make sure visitors can easily understand your brand once they arrive.

And for that, your website needs to be well- written, readable and carry a clear message to your audience.

For a more readable (and super effective) website get in touch with us today!

NZBN: 9429047543751