This post is part 2 of a two part series on improving blook readability.

In Part 1 we’ve taken a look at some designs that focus reader attention on the writing of a site, as opposed to designs distracting from it. Today we’re going to go through the common points these designs have: something that anyone with a little bit of time (free from writing, that is) can figure out on their own.

When we look at good, content-focused sites we notice that a lot is done to make it easier for the reader to read. It thus goes without saying that the fonts in which content is written in play a big role in determining site readability. Our hope, of course, is that when a site is easy to read more readers will give the writing a fighting chance – to prevent them from clicking the back button or – worse – flying off to some distant corner of the web, never to return.

Typography – the messy business of fonts

If you don’t already know, typography on the web is an embarrassment. There are only about 6 fonts in use, and at least one of them should be buried at the bottom of the ocean. These fonts are Georgia, Verdana, Arial Times New Roman, Trebuchet and Comic Sans.

Let’s go over them quickly:

• Novelr uses Georgia. I like Georgia. It is the font of choice for many design blogs, and it still holds a certain visual appeal for some people (eg: me). It reads wonderfully in larger sizes, though legibility takes a beating when it is scaled down to smaller ones.
• Verdana was created for on-screen reading, and it does that job very well. It is a big font by nature but remains clear even when brought down to very small sizes. It is the font most used by blogs.
• Arial is like that old Ford your grandfather used to drive around in. It isn’t glamorous but it gets the job done. Arial is designed for on-screen reading, and is used almost everywhere on the web – Wikipedia, for instance, and any Google search results page. It is a very reliable, readable font, but it slightly uninspired.
• Times New Roman was overused on the Internet way back 1990s. It can still be used, but only after some major CSS tweaking, and even then as post headers. Otherwise stay far, far away from it.
• Trebuchet is described by Microsoft as ‘good for web design’, and I’m inclined to agree. It may not be as widely used, and it might not turn up in some non-Windows computers, but it is a curvier alternative to Verdana or Arial. In Windows it is the default font for title bars.
• Comics Sans should be burned in hell. Do not touch.

Fonts on the web today are controlled by two CSS style attributes: line-height and font-size. I don’t have the time to cover the technicalities of how to do both, but messing around with these two properties in your blog’s style sheets will help you to tweak the way your font looks, until you get the feel of text that you want. Stick to big and wide – it prevents eye straining, particularly on backlit displays.

Additional resources on web typography:

Working with a limited font set on the web – Modern Life Is Rubbish

Web Typography Cheat Sheet – Modern Life Is Rubbish

New Vista Fonts & The Web – Modern Life Is Rubbish

Typography: serif vs sans serif – KuraFire Network

Layout – removing distractions

Layout refers to the arrangement of text in the site: is the blog one column? Two columns? We want to draw attention to the writing here, so it is generally bad to have more than 2 columns in your blook – the extra stuff that goes into your sidebar will distract the reader from the story you want him/her to read. In part 1 we’ve taken a look at useit.com – which uses a one column layout because it forces the reader to read the content – and nothing else! Personally I’d be using a single column layout for my blook – something I’ve been working on whenever I have the time – mostly because it keeps things simple.

The Text Itself

Beware of links. Links distract the reader, they throw them off being immersed in the story, and in general dilute the sense of atmosphere your writing seeks to create. If you do want to use links in your text, use them wisely – a well placed link here and there helps the reader to navigate, as well as allow you put the web to full use in your storytelling.

Another thing to watch out for would be the use of the ‘Justify’ feature. Do not justify your text. The problem with justification on the web is that it is unreliable – very often you will find streams of whitespace running through your writing, and the varying spaces between your words can be disorienting to your readers. It also does not help that justification is particularly poor with older browsers – Netscape, for instance, was known to repeat words in order to achieve an acceptable justified paragraph. Read Antipixel’s post on web justification for a little technical geekery.

Colour

When it comes to readability choosing colour is straightforward: go for high contrast between your text and the background, and the more relaxing the colours, the better. Choosing which colour to predominate on your site is entirely up to you, though I must say reading a zombie blook with a blog design that features pink flowers to be slightly … surreal. Remember: colour and visual motifs create an atmosphere for your reader, and what that atmosphere is depends on the type of story you’re writing. Of help in this particular area would be websites like COLOURlover and Poynter Online’s educational Colorproject.

Conclusion

Improving blook readability is no replacement for good writing – in many cases the design, no matter how ghastly, manages to pull through just on the strength of the writing alone. Your blook does not have to wow people, nor does it need to be so beautiful that it gets featured in a CSS gallery. What it needs to be – and what you should never forget – are the three simple qualities of readability, accessibility, and easy navigation.

Designing with your content in mind is never hard. It is more often than not common sense. Good luck with it.