Blog Design Basics - Readability

Blogs come in all shapes and sizes.  Some of the designs out there today are really breathtaking, the attention to detail and creativity, mind-boggling.  Tools such as Wordpress enable this creativity to be released to an unsuspecting world.

But with this great ability to be creative also comes pitfalls and dangers.  While creating interest in your blog is good, and a way of pulling in new visitors, creating a blog that misses the aspects visitors expect is a particularly effective way to lose them.

This series covers some fundamental aspects of blog design that really are crucial.  And the first subject is…

Readability

A while back I launched a redesign of one of my blogs.  I boldly went for a white text on black background scheme and promptly received numerous complaints from regular and new visitors alike.  Clearly there was a problem, and it was a big one.

The main complaint was that the blog was now difficult to read.  An unforgivable sin for any blog.  I remedied the situation as quickly as possible.  In my attempt to stand out from the crowd, I’d alienated a large section of my audience.

Readability is a fairly simple thing to get right.  To demonstrate the difference between good readability and bad readability, I’ve written the same piece of text twice below applying different principals to each.

There are a number of things at play here, so let’s go through them.

Alignment

While not immediately obvious in the above example due to the relatively small amount of text, the alignment is different for the two paragraphs of text.  The one on the left is “Left Aligned’ while the one on the right is “Justified”.

The main difference is that a Justified block of text has different sized spaces between the words.  This breaks the natural flow of the text and makes it more difficult to read.  The flip side of this is that Justified text typically looks nicer, it also gives the impression of more structured, complete piece of work.  Hence it tends to be used in print media, despite studies indicating that Justified text is harder to read.

Kerning

Kerning itself is an art-form.  Kerning is the spacing between letters, and can have a great impact on readability.  The difficulty comes from ensuring the letters are close enough together for readers to follow the general shape of the word, but not too close so that letters merge into one.  A problem that’s recently been called Keming.

To understand the importance of kerning on readability you have to understand that in order to read quickly, the vast majority of people skim across passages of text.  Using mostly the first and last letters in conjunction with its general shape to “read” it.  Very rarely does every letter in a word get read.  Therefore it is important that words look like words.  Their length and the positioning of letters within them is very important.

In the example above, the kerning is normal on the left hand side but very compressed on the right.  In my opinion, it is this alone that makes the biggest difference to readability.

Line Spacing / Line Height

I remember, back in the day, being ordered to use double line spacing when writing my final year dissertation.  The reason?  Readability.  When you’ve got to read through a 300+ page document, the little things really make a big difference.  I didn’t really understand just how big a difference line spacing made to readability until I printed out the document and proof read it.

For most web pages and blogs, double line spacing is excessive and can actually hurt readability.  I’d certainly recommend going for between 120 and 150& line spacing for optimum screen readability.

Color Scheme

While things such as color schemes always ultimately come down to personal taste and preferences, it’s generally harder to read white text on a black background than the other way round.  I believe this is nicely demonstrated by the example above.

As a general rule, you want high contrast text but not necessarily very high contrast.  Black on white tends to be popular, for obvious reasons, a dark grey on white works just as well whilst providing a nice aesthetic.  What you do need to be wary of, however, is text that is in too low contrast to the background as well as text across a busy or distracting background.

Other Considerations

There are other elements that impact on readability that I haven’t covered in the example but are just as important.

• Font / Typeface - Again something that comes down to personal taste but there are a few guidelines to follow.  Typically sans-serif fonts work best on screen, serif fonts when printing.  Use a font that contains what you would describe as “typical” lettering.  You also need to ensure the font you’ve chosen works at the size you intend to use it.  The biggest hurdle here is where you are using a particularly small size.  In these cases, something like Silkscreen is a pretty safe bet.   Suffice to say you should go for popular fonts that the majority of your users are likely to have installed and ensure you have adequate fall backs.
• Breaks and Sections - As with all good writing, make sure your text is broken up into paragraphs and sections wherever possible.  There’s nothing more daunting as a reader than a massive section of unbroken text.
• Text Size - Following on from the point about fonts, the size of text is very important.  Too big and it can become un-manageable for the reader, too small and it can become difficult to distinguish words and letters.
• Width - Not often spoken about, but the width of text should be kept to something around 80 characters.  Less if you are aiming your content at a less literate audience.

Hopefully you’ve now got an understanding of what affects readability on the web, specifically on blogs.  is there anything you’d add to this list?

» Read the other articles published in Issue 1