8 Key Web Design Strategies to Improve User Readability

By Bodie Czeladka in Dilate Digital
8 Key Web Design Strategies to Improve User Readability

Readability is one of the most overlooked issues that plague the websites of today. As web designers in Perth, we often see so much focus being placed on getting the web design right, that business owners often forget the importance their content plays in the user experience, once the web design is complete.

The truth is that content readability is just as crucial as the branding and web design itself. Because there’s no point investing in a web design service with all the latest and greatest web design features if the readability isn’t there.

In simple terms, it doesn’t matter how good the actual content is if the readability sucks. So let’s help you to make sure that your readability is just as good as your copy and your web design with our top 8 readability hacks to keep customers on your page and engaged!

1. Font Size & Typography

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

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

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

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

Use of sub header

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

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

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

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.

Dilate Digital
Bodie Czeladka

True Digital at heart; Director of all things wonderful at Dilate Digital, with an advanced understanding of digital marketing and new software applications. Gadget-geek surfer, husband and father who enjoys anything away from the concrete jungle!

Don't Take Our Word For It

DilateDigitalPerth has received a fantastic 5/5 star rating startratingfromgoogle from 57 Clients on Google
Our List Of Clients Subaru
Our List Of Clients Pool Assist
Our List of Clients Casey Tours
Lukes Landscaping Logo
Our List Of Clients Mazda
Our List Of Clients Kaya Health Clubs
Our List Of Clients Skoda
Our List Of Clients The Maker
Our List Of Clients Mouritz
Our List Of Clients Aussie Natural
Our List Of Clients Lawrence Group
Our List Of Clients Access Hire
Our List Of Clients Matcha Maiden
Our List Of Clients Rocket Fuel Coffee
Our List Of Clients Golf Box
Our List Of Clients Tyresales
We're here to help

Not sure where to start?

Our team of digital and business experts will guide you to the right direction.

Start Something

Hi there, how can we help?

Please let us know which service below best suits you and your business.

Digital Marketing

Which of the following services are of interest to you today?

Web & Creative

We bring to life remarkable creative, strategic and technical scree-based solutions, enabling businesses to engage with their target markets, present themselves effectively online and be leaders in their respective industries.

Which of the following is of interest to you today?

First up, what do we call you?

We'll use this to address you in all future communications.

Thanks Bodie, What is your Business name or Website URL?

Awesome Bodie, what brought you here today?

One last thing, can grab a phone number?

We'll use this to reach out.

Thank you, a member of our team will be reaching out shortly.

Go Back to Website

Launch Something