Connor Wilson » Blog Archive » Considering Readability when Designing

Considering Readability when Designing

Posted on March 12th in Design — 9 Comments so far. Got something to say?

One of the major contributors to a good first impression is how easy your content is to read. There are many factors that come into play when talking about readability, such as age, eyesight, foreground and background colours, as well as font and font size. Then there’s some browser dependent variables, like IE7’s anti-aliasing.

First and foremost, know who will be reading your content. It’s not hard to say, that as age increases, eyesight decreases. If you run a blog about celebrity and your market is young, feel free to go for the black background and yellow text, but once people hit 30-35, they seem to like things that are easier to read. What exactly is easier to read? First of all, when chosing a readable font, you have to make a decision. Serif or Sans-Serif? For those of you who don’t know the difference, a serif refers to the ‘flares’ or points on the ends of a character. Don’t get it? This image explains it all:

Sans-Serif fonts, such as Verdana, Arial, Helvetica, etc… are considered by some to be more readable on a screen (computer screen, mobile, iPod, etc…) than Serif fonts, however when reading on paper it is said that Serif fonts rank supreme. So which one do you want to make your website most readable? The most common font on the web by far is Verdana (sans-serif), and it is widely used in all shape and forms, from the smallest of sizes the largest heading, Verdana is quite popular. It’s also very easy to read on a screen because of it’s subtle curves, and it helps that you see it everyday, everywhere.

On the Serif side of things, Georgia is a popular choice, and serves as a much better alternative to the boring and crunched style that is Times New Roman. Georgia has wider letters, is more curvy and has some unique features that set it apart from Times. Simple things like lower numbers make it a nice choice.

Another thing when choosing Serif/Sans-Serif is that on the web, a Serif font scheme will likely look classy and elegant, and Sans fonts will likely look like everything else. Now that you have chosen your Serif or Sans-Serif font, let’s talk about colours, in the foreground and background.

The amount of contrast will always effect the readability of your content. The best contrast for the web is always black (#000000) on white (#ffffff). The same logic does not apply when you switch them. White on black, while sometimes benefiting the overall feel and design aspect of a website usually decreases readability. This isn’t to say that you shouldn’t use a “light on dark” colour scheme, as you can see from that link that it’s quite popular. This again is impacted by your reader base.

Now, when straying away from black and white, readability starts to go all over the place. A really dark navy blue with white text will have almost the same effect as white on black, as would black text on an extremely light grey. Some combinations are things you have to decide from your self, but here are some colour combos (they go both ways) to avoid.

Yellow and Purple
Blue and Red
Green and Blue
Yellow and Black/Dark Grey
Dark Grey and Black, Light Grey and White, etc…
Anything on Yellow

This doesn’t mean don’t use these colours together in a design, but avoid using them as a foreground/background type of thing. Another thing to avoid colour wise are analogous colours. This refers to colours that sit next to each other (or close) on the colour wheel (below) and look good beside each other because they’re so closely related. You can guess why two similar colours don’t work for text. The colour wheel (via faceters.com, click for full view):

Next, you need a good font size. Small fonts kill readability for everyone, but fonts that are too big do also. Verdana at 12px should be the minimum you use that font for a main content block, and 14px works well too, but 10px is pushing it and 9px or lower is just bad. Other fonts like Trebuchet MS or Georgia can look good up to 16px, and down to 12px. Nothing too complicated here, but keep it between 12-14px for most fonts and you’ll be fine. And remember, this is referring to a main content block, not a sidebar, or a description of something.

Finally, the developers of IE7 (bastards!) decided to make it anti-aliased, or “clear type” as I think they call it. This makes most fonts bigger, and smooth around the edges, which can either be great for readability (what they wanted), or horrible. Just keep this in mind, small fonts will get butchered by IE7 (unless they can find their options and turn it off), and decrease your readability more, seeing as you were using a small font to start with!

Well, here’s the conclusion. This was a little bit more indepth then I was hoping for, but I hope you enjoyed it anyways. As some closing words of wisdom, I recommend Verdana at 12px (with ample line-height) for sans, and Georgia at 14px (also ample line-height) for Serifs. Line-height! I guess that’ll be another day…