8 Key Web Design Strategies to Improve User Readability

Bipu Bajgai
By Bipu Bajgai

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.

happy clients

what our clients are saying

create business. better everyday.

Let's Talk

feed your mind

learn from the best minds in the business

LATEST VIDEO TIP

Our approach to becoming Australia's most respected agency.

Our approach to becoming Australia's most respected agency.

Bodie provides some insight into Dilate's internal operations. How we approach what we do, and how we strive to be Better Everyday.

Close

    Let's Talk

    Leave your details below or give us a call on 1800 345 283 and let's chat about your goals, and how we can help grow your business.

    Free, No Obligation Audit and Consult.

    By clicking submit you agree to our Privacy policy
    [handl_ref_i][/handl_ref_i] [handl_landing_page_i][/handl_landing_page_i] [handl_url_i][/handl_url_i] [submission_page_i][/submission_page_i] [utm_source_i][/utm_source_i] [utm_medium_i][/utm_medium_i] [utm_campaign_i][/utm_campaign_i] [utm_term_i][/utm_term_i] [utm_content_i][/utm_content_i] [gclid_i][/gclid_i]

    Close

      Get Started

      Leave your details below or give us a call on 1800 345 283 and let's chat about your goals, and how we can help grow your business.

      Free, No Obligation Audit and Consult.

      By clicking submit you agree to our Privacy policy
      [handl_ref_i][/handl_ref_i] [handl_landing_page_i][/handl_landing_page_i] [handl_url_i][/handl_url_i] [submission_page_i][/submission_page_i] [utm_source_i][/utm_source_i] [utm_medium_i][/utm_medium_i] [utm_campaign_i][/utm_campaign_i] [utm_term_i][/utm_term_i] [utm_content_i][/utm_content_i] [gclid_i][/gclid_i]