philwilson.org

What is legible text?

24 May, 2004

One of the many sites I read linked to findability.org today. The thing is, whilst the people behind it may know a lot about findability, I’ll never know because I can’t read their site. A nice light-grey text on a white background gives me so much trouble that I just won’t read it. I could spend some time customising their site with my own CSS, but frankly, it’s more effort than it’s worth. My time is valuable, and if you’re not going to design yore site in such a way that I can read and navigate it effortlessly, then not only am I not going to stay on your site, I’m not even going to skim read it (other than to look for a style switcher).

Didier Hilhorst recently wrote When Black Is Not Black, a piece on why you shouldn’t use black for website copy. It’s obviously a little tongue-in-cheek, and reveals an awful lot about designers (especially one so noted for his CSS skills), but is very telling. The thing I care about more than any other in design is that I can read the text. Really. I’m an end user, I’m no design genius. I won’t be told that the contrast on my monitor is all wrong (which has happened before), because frankly, everything on my computer except your site looks just great thank you very much.

The thing is, of course, that most designers hate black-on-white text. OK, I’m generalising, but look at the list of the 80/20 design blogosphere and see how many use black on white text. Finished? Not many, was it? Of course the thing with legibility isn’t just about the choice of text and background colour; the font, its size and the line-spacing all contribute (typography in general deals with many other factors but most of these just aren’t available for change on the web). For example both stopdesign and Simplebits have extremely legible sites with white background and non-black text (without looking it at their CSS, I’m guessing at about #666), mainly due to the large text and line-spacing, much larger, in fact, than you’ll typically see on a commercial website. Think of a few large global organisations, check out their websites, and see what they do. I looked at Microsoft, Dell and TimeWarner – they all have pretty similar text sizes, but the TimeWarner site is far less legible to my eyes. Checking the styles, it uses #333 for text.

Now of course, this isn’t meant to be conclusive proof of, well, anything really, but as long as your text remains below a certain size (let’s say 0.75em with 1em line spacing for an arbitrary line in the sand) you’ll most likely be better off with black text rather than something “close enough” like #333 or #666.

Actually, Didier has followed up his previous post with Contrasting Vision which offers his readers the chance to select the most readable copy text and constant background colour and let him know. Of course, it took me quite a while to get there, because his #4C4C4C text makes my eyes blur. 😉

See other posts tagged with general and all posts made in May 2004.