Website Design, Graphic Design and Readability vs Legibility

By 31 January 2014 
Graphic Design Readability - Book of Kells

Graphic Design circa 800 AD. From the Book of Kells

Ask any website design or graphic design professional what makes a good design and you’ll drown in opinions. One of the few things we can all agree on though, is that the message we are attempting to convey mustn’t get lost and a critical factor in the success of website design and graphic design is readability. You’ll note that the words ‘website design’ and ‘graphic design’ were bold just now and I’m also using those words a lot. I did this to illustrate a point I’m going to make later.

I was teaching a colleague some coding fundamentals last week and I discussed the importance of making the code readable. My use of the word ‘readability’ prompted another colleague to announce that I should have said ‘legibility’, not ‘readability’. At the time I chose not to dispute his assertion and continued on with the education session, however this week the subject of readability came up again during a discussion with our SEO Manager.

So what is legibility and what is readability? Boiled down, legibility is about individual letters while readability refers to documents as a whole. For example, the ‘illuminations’ found in ancient religious manuscripts were often highly ornate works of art, yet understanding the first letter often only came from its context with the rest of the word; the manuscript as a whole being quite readable. A document can be both illegible and unreadable and anyone who has ever tried to read a doctor’s prescription will understand what I mean.

So what does any of this have to do with the design process? Quite a lot, actually. Try this: look up a phone number you don’t know and transcribe it to a piece of paper. I bet you wrote the information down in chunks and not all at once. Separating information into pieces enhances readability. Look at this blog; the ideas are separated into paragraphs and paragraphs are broken into sentences. The same applies in graphic design. Logos that have good typography, colour balance and spacing are much easier to read than overly elaborate logos. Poor readability in graphic design will be our social media topic this week, so keep an eye out. We’re going to post some poor graphic design examples to illustrate the importance of readability.

graphic design logo for metal band

I couldn’t read this. Can you?

Context is also a big part of readability, bringing us back to my discussion with our SEO Manager. Patrick advised that our content needed to be better optimised for search engine ‘robots’ and while I agreed with him in principle, I put my foot down at obviously aiming the content at the robots. If you’ve been to websites where there is bold text in the middle of a sentence (like at the beginning of this article), you probably wondered why the text was emphasised. This was done for the robots in an attempt to get a better ranking on keywords. Overuse of keywords is a less-than-ethical SEO practise known as ‘keyword stuffing’. When the keyword is emphasised in bold, the code in the background basically shouts, “Look at me, I’m very important!” To the human eye however, it is distracting, out of context and interrupts the natural look of your website design.

Recalling my first paragraph at the beginning of this article, did you wonder why the words ‘website design’ and ‘graphic design’ were bold? Was your eye drawn to those words, distracting you from the rest of the content? Did the repetition of those keywords interrupt your natural reading flow and feel forced? Google and other search engines are wise to the myriad of unscrupulous ‘black hat’ SEO techniques and their search engine algorithms (the aforementioned ‘robots’) are incredibly clever at detecting keyword stuffing and other such tricks. In fact, this very page will probably be penalised for the keyword stuffing I did at the beginning. A sacrifice for the greater good, I suppose.

Readability in the web design context is about balance. You have to engage your visitors but you also have to engage the search engine algorithms. The Google algorithms in particular are very good at detecting natural language, so while readability is just one of the many facets of good design, I think that it is a very important one. Engagement with your target audience is the only way you are going to be able to generate sales, so the success of your website will depend on how you engage your visitors. The success of your graphic design will mostly depend on the emotional connection a customer has with your brand, a connection that will be difficult to cultivate if they can’t read your logo.

The best website design in creation is all well and good, but it means nothing if the search engines don’t rank your site well, leaving it so far back in page results that you have to import daylight. Conversely, content that is obviously written for search engines makes reading your website unpleasant and will probably increase your bounce rate. It can be a difficult balance to strike and while I’m certainly not the best or most engaging writer in the world, I’d personally prefer to write for people every time. After all, it’s people that are paying the bills.

Bye for now,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>