8 Key Web Design Strategies to Improve User Readability

1. Font Size & Typography

First up, can we please do away with using that ridiculous cursive typography as your body font? I mean, you’re asking for readability issues. The secret to font size and typography is keeping it simple. Sans Serif fonts like Verdana, or a Serif font like Georgia, are fonts designed purely for online reading. Ours is GT Walsheim Pro, and it’s incredibly easy to read. The same goes for font size. Too big and the content seems to be endless and disjointed, too small and as you can probably guess, it becomes too much of an eye strain. The general rule of thumb for your body font is to keep it between 10 - 14 points, at all times.

2. Line Height

Line height is the distance between this line.

And this line.

Believe it or not, line height plays a crucial role in the ease of readability for a visitor. The more space between the lines, the easier your content is to read so it’s important to always factor this into your web copy. Here at Dilate, we recommend starting at 24px for your line height and then working up or down from there.

3. Colour Palette

The choice of colour palette for your branding and website is a serious factor when it comes to readability. Honestly, your readability should never be sacrificed at the cost of your colour palette, and a good brand guide will keep this factor in mind when creating your brand.

You need to look for a complimentary contrast of background colours and font colours. Luckily, it’s a logical process which doesn’t require you to go to design school to figure out either. Just by using our sight, we can see that black text and a white background (or vice versa) is the perfect contrast for readability. We can also then see that a pastel pink background with white text is perhaps not the best choice for readability.

It’s all about the contrast of colours!

4. Line & Letter Spacing

When it comes to reading content in general, whether it be online, in a magazine, or in books, all the major players in media have the same thing in common - they keep it narrow. Your line width and spacing should never be too long because it makes it a lot more difficult to read. That’s why the newspapers and magazines use columns, that's why books aren’t A4; it’s just not the most pleasurable to read. As a guide, 50 characters per line is the perfect amount for readability gold.

5. Sub Header Use

Sub Headers are the EASIEST way to break up content, keep your readers engaged, and improve readability. Every second paragraph, in general, should have a subheader, briefly summarising the content that follows. Subheaders should always be slightly more bold and larger than the body, and even on occasion a different font entirely.

The goal of subheaders is to highlight key points of content to allow for the majority of online readers who simply ‘skim’ to easily follow along with your content.

6. White Space

Ahhh, sweet, clean, minimal, easy-to-follow white space, you’re every web designers secret ingredient. You make everything look better, you make navigation easier, and you make reading online so enjoyable. That’s what I say every time I stumble upon a website cleverly laid out with the perfect amount of white space.

It’s so important not to cram every inch of your web page with text. It’s overwhelming and at the risk of sounding harsh, it’s also just plain ugly. White space helps to make your website more scannable and less of an eyesore for the reader. Leaving lines of white space between sections helps to separate the content and appear more approachable.

7. Bullet Points, Bold & Italic Letters

Example A:

Gather all ingredients, set the oven to 220, chop onion, garlic, and ginger then set aside, combine all spices together with the chipotle marinade, place chicken in the marinade for 30 minutes, saute onion and garlic on low heat until lightly browned.

Example B:

• Gather ingredients
• Set the oven to 220
• Chop onion, garlic, and ginger then set aside
• Combine all spices together with the chipotle marinade
• Place chicken in the marinade for 30 minutes
• Saute onion and garlic on low heat until lightly browned

Which one's easier to read and remember without being overwhelmed? If you said example B, you’re like the majority of online readers who also find the use of bullet points to present information far more manageable to dissect than the same content written in paragraphs.

Now consider this:

“When I’m reading this sentence I can easily tell what word the emphasis is placed on”

“When I’m reading this sentence I can easily tell what word the emphasis is placed on”

“When I’m reading this sentence I can easily tell what word the emphasis is placed on”

Which of the three sentences above are the correct ways to use italics and bold for easier readability?

The first two sentences are the wrong way to present information and key points of information. The sentence after, however, is the best way to break up information to make it easier for the reader

8. Sentence & Paragraph Structure

Last but not least is your sentence and paragraph structure.
The answer to both is the same as line spacing.
Keep it short.

The shorter your sentences are, the easier they are to read. The shorter your paragraphs are, the easier they are to read, too. When our sentences and paragraphs become too long, we sometimes get confused with where we are at and get lost in the text. It’s best to try to keep it to 3 - 4 sentences on 4 - 5 lines, for ultimate readability.

If you’re looking for ways to improve your website readability, it might be best to team up with a web design service, like our epic team of web designers here in Perth. Not only do we understand the rules of readability when it comes to content, but we also understand every other technique for creating an engaging user experience for visitors on your website.