Improving Website Text Readability: 5 Quick Wins

There seems to be a common consensus among modern-day web designers and entrepreneurs these days that in order for a website to be successful as a business tool, it first and foremost needs to be different and visually impactful. This has lead to the actual most important factor being neglected and in some cases ignored altogether. That factor is readability.

It was Steve Krug, author of Don’t Make Me Think that said the following:

Don’t let your design resist your readers. Don’t let it stand in the way of what they want to do: read.

Perhaps these days we could swap out the word "read" for the word "scan" but the key message and point remain the same. Effectively communicating your message through website content (especially text) is to a very large extent the determining factor in whether your prospect will click the contact or buy button at the end of the session. There are so many factors that can enhance or detract from the readability of website text. This article covers 5 of the most important and easiest to fix.

Contrast is Compulsory

Contrast in the context of readability refers to the perceivable difference between text and its background.

Strong contrast between text and background is probably the most important factor discussed in this list and thankfully, it couldn’t be easier to understand and fix. If a section has a light background you need to use dark text. If a section has a dark background you need to use light text. Ok, I am of course oversimplifying this issue a little bit but at its core the concept really is that simple.

One of the most commonly made mistakes I see is the use of white text on top of a bright colored background. Now to someone with perfect vision in many cases, this will actually be fine as they will notice sufficient contrast and be able to read accordingly. For someone with any degree of color blindness or visual impairment however, this text could be completely illegible.

Key Takeaways

• Always prioritize text contrast over your background color. Legibility needs to come first

• You can check contrast ratio using a tool like Webaim offers for free

• If you are struggling to get enough contrast on a bright colored background, try inverting the background to light and the text to dark like the example above

Give Text Its Own Space

Whitespace is one of the most important tools in the web design toolbox. It provides a sense of calm to design and enables a clear, uncluttered display of content allowing the user to scan over it easily. Many website owners however see whitespace as “unused” space and seem intent on filling any gaps they see.

That leads to designs that look like this:

Embracing whitespace and creating clear separation between important text and associated elements brings a sense of calm, increases readability and makes it far more likely that scanners will notice important text.

Through the use of a little bit of whitespace, we now have this:

Key Takeaways

• Resist the temptation to fill in whitespace. More often than not, whitespace is a blessing not a curse.

• Give text its own space and avoid wedging it between other elements.

Use Headings as Signals

Think about the last time you visited a website that had a significant amount of text content. When you were on the site did you?

1. Read each and every bit of copy carefully and meticulously

2. Scan over the page at the speed of light, trying to pick out keywords in line with your goals so you knew which content was worth taking the time to read

If you chose one, congratulations on being part of an elite group of 0.00001% of internet users. If you chose 2, you are like absolutely everybody else on the web. The reality is, we have very little attention to give individual pieces of content these days. When we land on a website we want to get to the content that will allow us to solve our problem or achieve our goal as quickly as possible. The way we do this on the web is by scanning text for keywords that are important to us, stopping on content that contains those keywords and then consuming that content in detail. Headings that contain important keywords allow us to do just that.

Imagine you are looking for a specific service on a business website and the information is displayed like this (This is placeholder text because I don't have time to create copy for three fake services, forgive me):

Chances are, you would immediately start scanning the text, looking for keywords that are semantically related to your desired service to help your zone in on something worth your time and effort. Having to do this is annoying and unnecessary. More often than not, this type of layout would actually cause someone to leave your site and look for a competitor with easier-to-navigate content.

‍Now what if the page were displayed like this:

Although this updated design is not going to win any Awards, its use of clear, concise headings allow the user to immediately identify and apply their precious attention to the service content relevant to them. Users appreciate layouts like this because they save time and mental effort.

Key Takeaways

• People have limited attention to give. To keep users engaged, make use of headings containing signal keywords so they can quickly and efficiently zone in on the content relevant to them

• Use these headings to break content up into semantically related chunks

Use Lists Where You Can

The value of lists is rooted in an insight, beautifully summed up by Hoa Loranger from Nielsen Norman Group:

The Web is usually not the place for long, narrative writing. Instead, Web readers prefer copy formatted for ease of scanning, which allows them to easily skip through chunks of text to get to areas of interest.

People like lists because they highlight key information and make it easy to consume. a long, drawn out paragraph in contrast is more work to get through and is therefore more likely to be ignored. If you have a series of important bits of information, put them into a list wherever possible.

Take the example below, starting with a paragraph that could easily be converted to a list:

This could be transformed into a list as follows:

The result is text content that is more scannable, and allows the reader to see and understand the steps with less effort.

Key Takeaways

• Lists make it easy for people to find information quickly and efficiently

• If in doubt, put it in a list

Text Containers Should Be Narrow

Just because you have 1440px or 1920px worth of monitor does not mean you have to use all of it, especially when it comes to text content. Wide text is difficult to read in general. It makes scanning tricky and causes readers to use their place, often resulting in them reading the same line twice or accidentally skipping lines they haven’t read yet. Narrow content is far easier to read.

Medium makes use of narrow content to enhance readability:

The above screenshot was taken on a 1920px x 1080px monitor. The max width set on the container wrapping text is 692px, much less than half of the total screen size. Be like Medium. Avoid the temptation to span your text over the entire screen on desktop devices.