Website Design Blog. Evoart

Does going all out and doing everything humanly possible to increase the readability of your site mean that you have to compromise design wise? In this short article we’ll look at a few well known techniques most of us deploy to increase the readability of our websites, and then we’ll discuss whether they compromise the design of our work. We’d love to hear your comments on this, so after you’ve read the article, please let us know your thoughts!

What is ‘Readability’?

Heres a great way of explaining the term readability:

Readability is defined as reading ease. Extensive research has shown that easy-reading text improves comprehension, retention, reading speed, and reading persistence.

Why is readability important?

A website is a tool that provides information to a visitor. It tries to get them to buy in to something - a service, or a product. It might even act as a resource to inform and educate them. Obviously it depends what your sites about.

Either way, what we do know is that the main body text needs to be comfortable to read. Certain areas of your site need to attract more attention than others, as particular elements will be of more importance that others on the page. As designers we have to make sure that these don’t all compete with each other, and that the most important elements are clearly distinguishable over the rest.

5 simple techniques for increased readability

Below Ive outlined five really simple techniques you can use to increase readability.

Larger body copy

Although size 1.6em Arial doesn’t look fantastic as your site’s main body copy, there is no denying its very comfortable to read.

My personal opinion is that between 1.2 and 1.4em is the perfect size for main body copy. I don’t know about you guys, but when Im reading anything smaller it starts to become a bit of a struggle. Especially if the copy in question is a lengthy article. The next time you come to mock-up a design try stepping outside of your comfort zone and up the text size a little. Big fonts seem to be in right now anyway!

Clearly differentiate main content from your sidebar content

Content becomes very tough to read when it runs too close to the content in your neighboring sidebar. Its important to make sure theres enough padding between the two so that a visitors eye doesn’t dart from one to the other. Your article is what you want your visitors to read and padding acts as a sort of barrier between the two.

Applying a slight variation in colour to your sidebar can also help you establish a clearer barrier between the content and sidebar sections.

Think of it like the fence between you and your next door neighbor. You wouldn’t want that fence not to be there would you? If it wasn’t you’d loose your privacy and anyone could wander onto your land. I guess its the same idea with your content and sidebar area. You don’t want the readers eyes wandering across the two.

Enough whitespace between paragraphs

Whitespace is great. It helps designs ooze confidence and professionalism, if use in the right way.

Spacing your typography correctly is of crucial importance. I remember when I first started designing for the web I wouldn’t really pay much attention to mocking up the main body text in Photoshop. I’d always add it in, choose a colour, adjust the line height a little and leave it at that. As long as it looked good and complimented the rest of my design.

These days I spend much more time making sure the copy on sites I design is as readable as possible. Spacing between paragraphs for example is an important thing to consider. Too much and you haven’t provided the reader with something to easily move their eye onto without much effort (this is know as eyeflow). Too little and the sheer mass of content is likely to intimidate your reader.

‘Inverted Pyramid’ technique

The ‘Inverted Pyramid’ is a pretty well know technique you’ve probable heard of before. Imagine a Pyramid turned on its head.

 

Basically it suggests that your call to actions and most important features should be the largest on the page, then possibly the headlines, followed by your main content, and then the less important information. Everything should flow down the page. You get the idea!

Drop caps and Indentations

I recently discovered, after talking with someone heavily involved in testing the conversion rate of numerous web pages, that if you start the main sections of your copy with drop caps it increases readability. Why? Well it gives the eye something to latch on to and encourages the visitor to continue reading and making progress down an article.

Does increased readability compromise design?

I believe that sometimes we can get too caught up in making things look good. Its important to understand that although a website needs to look good, its main purpose it to provide information. As a web designer its your job to display this information in the most readable manner, and still make it look good. Sometimes this can be quite a challenge! However the importance of readability can also be taken to the other extreme when people start requesting 1.8em main body copy.

So its over to you guys. What have been your experiences with readability. Do you think it compromises design?