Improve Website Readability By Using Better Typography



Are you losing readers from your website? Are you left scratching your head thinking what is causing this?  There can be a number of different reasons as to what is causing this (no SEO, poor content, no social media interaction, etc.) but there is one thing that many sites fail to look at, and that is Typography!

Content is by far the most important aspect of a blog, as it is this that will attract the traffic to your site.  That said, if people can’t read your content properly due to poor site typography, then they won’t stick around for long.

By definition: Typography  is the art and technique of arranging type in order to make language visible.Typogrpahy From Wikipedia

Typography is a significant aspect of contemporary web design especially for those working with @font-face property in CSS.  Here are some design tips that you can use to help improve your website readability.

Top Typography Tips

The Grid System


The Use of Grids in Website Design

If your design elements and text are all over the place on your pages, it can becomes difficult for the reader to follow the page correctly. It just looks messy.  You can use a CSS grid system for your site to ensure that your content is all organized into neat columns and grids.

This makes directing the visitors to all the key elements on your page much easier. Some of the popular grid systems that you can use are Blueprint or which can be used when designing your website.

Colour Contrast


While grid system and layout are all important, so are the colours that you use. Using a light text on a light background or dark text on a dark background will never work. This will just make things very difficult to read, if not completely unreadable.

You are much better sticking to using either;

  1. Dark Background with Light Text
  2. Light Background with Dark Text

These keep things simple and make sure that your text is easy to read.

An interesting point to add is that if your target audience are people over 50, they will tend to prefer darker text on a light background as they find it easier to read.  The contrast in colour also plays an important role. For instance, if your site has a black background, make the elements bright to draw the attention of the readers (i.e. dark blue may not work so well).

Visual Hierarchy


Visual hierarchy is the process of guiding your readers through your article and getting them to notice the different aspects that you want them to see.

Every article will include; large paragraphs, small paragraphs, titles, subtitles, quotes, images, etc. which become reference points for your readers when reading through a post.  Factor in the use of different colours, fonts and various other elements and you begin to create a visually interesting article that naturally draws the eye of your readers.  Which leads nicely to our next point…

Using The Right Font

In order to present your writing in the best way possible, you need to choose  the right font.  The font that you use is arguably THE most important design element on your site, as it is your text that will be read the most.

You may be tempted to use a snazzy or unusual font type, but in most cases you are better off sticking to something simple.  Use stylish fonts for other visual elements, but  keep your articles easy to read.  Remember that what is important is how they look inside your text.

Keep Text Short and To The Point

It’s fairly well known that when people visit a site, they don’t generally read an article word for word, they simply scan through it.  Therefore, by breaking up your posts into short and to the point paragraphs helps to improve readability.  This links in well with ‘Visual Hierarchy’ as it helps to draw the eye of the reader and keep them interested.

Use bullet points, quotes, statistics  etc. to break up big chunks of text and make sure to check over your post before your publish it to remove any “superfluous” words and sentences that aren’t necessary.

Incorporating some of these tips into your website design can help to engage your visitors and allow them to interact with your website more.

What about you? What design tips do you use to improve readability? What design elements do you really like/dislike on sites that you have seen?  Please let us know by leaving a comment below!

About William Johnson

William belongs to the most creative field of digital media, Web Design. Currently he is obsessed with the latest trends in eCommerce development, site design and development, online marketing, Magento eCommerce and lots more.. He is also an editor at Big Eye Deers. Follow him on Twitter, Facebook or Google+.

  • Lots of interesting design tips here. Cool post William.

    Being a bit of a tinkerer myself I can never get settled in the design of my blog!

    • I’m like that too John. Already working on a revamp of this site, watch this space 🙂

  • Pingback: This Week in Type #11 | Blog()

  • Peter Mutiso

    Excellent designs tips Johnson – but it consumes time for someone to come up with a good design though

    • Hi Peter,

      It can take time to come up with a good design, especially if you are new to web designing. That said, the web design that you do use has a big impact on whether your site will be successful or not. Poor layout, bad navigation, high loading time, etc. all will put people off your site, so it is worth spending a bit of time making sure that you are happy with everything.

  • Andi Leeman

    A very interesting post, I work for a copywriter and he often talks about how big sales letters are designed for people who scan that is why certain words and sentences are in different colours, fonts, sizes and italics so that they stand out (Visual Hierarchy) and they then stop the scanning and get noticed.

    It works, it is about choosing the right sentence and words though. Stops the reader in their tracks and makes them take notice of what you want them to read.

    Also, the only time they will use white writing on black is if the create an image to represent a news paper headline clipping. Otherwise it is a no no, people struggle to read white on black.

    • Hi Andi,

      It’s amazing just how affective adding a few bold/different coloured words can be. Just helps to draw people’s attention to the important stuff that you want to highlight.

      I should think it is even more important when creating sales letters or landing pages, as they are what you want people to look at.

  • This is interesting, not many people think that typography can turn your visitors away

    • It certainly can turn visitors away if done badly. The bare minimum that a site should be is easy to read, anything less and people won’t stick around for long.