// 11 Luscious Designs Let Down by Illegible Type
// Mar 5th, 2008 & filed under Showcase, TypographyAs much as design may be considered subjective, there are more ‘rules’ than you might realise.
The primary objective of type, for example, is not to look pretty, but to convey information. There are times however, when this rule isn’t adhered to as it ought to be, and type becomes more of a detail or texture, than a medium to ferry information.
The Illegible 11
Below I’ve listed eleven beautiful sites, which have been recognised for their attention to detail, and pre-eminence over the vast majority of sites out there. However, they all have one thing in common; illegible type (mostly just in part, rather than the whole).
Please don’t assume because I’ve pointed this out, that I think I’m any better than the designers responsible for these designs. Far from it. I’d be delighted to have these in my portfolio. I’m just stating a fact. Of course, in some of the cases, my gripes could be rectified with a simple ‘ctrl/cmd +’, but that’s irrelevant. The vast majority of casual users aren’t even aware of such a function.
Ok, listed in no particular order:
I love the bold colour of Steve’s site, and he very wisely puts his work first (which, by the way, is excellent). However, coupled with the unusual colours, and the tiny font size, much of the text in Steve’s site is extremely difficult to read comfortably. Just check out that text in the sidebar, and even the body text used in the blog.
Just up the size a bit Steve. My eyes don’t desire to take the time to read that you were a “…founding director and designer at Styrofirm…”, etc. Although, maybe it doesn’t matter, as you work speaks volumes.
Admittedly, I feel a little picky to include this in the list. Cameron is a young guy with serious talent. However, although the simple layout and design is extremely striking, and may be acceptable for the short posts, the font size is irritatingly small for the articles.
Just a notch bigger, even just for the articles, and the site would be more comfortable to use.
Again, it’s probably harsh to include this wonderful, and extremely well thought out design by Jeff. Nevertheless, as can be seen from the comments, the design has legibility issues. The high contrast of the main body text, and the extremely low contrast of some of the non hyperlinked text in the sidebar, and the brief directions on the right of the comments section, are extremely difficult to read.
I know Jeff won’t change it, and he’s well within his rights; he likes it. But, it doesn’t alter the reality, it’s annoying for some users. Got to love the pink though!
Beautiful and classy. Nevertheless, the sidebar is the primary issue here. Who really can be bothered to read the tiny, fairly low contrast text in the sidebar? I may be wrong, but I’d guess the bounce rate would be fairly high on this site for new visitors. Too much information, text too small, and the sidebar headings just aren’t bold enough to give my eyes any anchor points. My eyes need anchor points (so do yours, in case you didn’t realise).
A simple reorganisation of the information provided in the sidebar, removing that which is unnecessary and increasing the font size, particularly for the headings, would help this a lot.
Designed and run by a really great guy, Collis. However, he went with an odd decision in the design of the awesome PSDTuts. He chose a small body text, over a wide width, making reading not as easy as it could be. Furthermore, the small text gets lost among the huge images, and makes scanning more difficult. The strange thing, is that he made the text in the comments larger, even though they’re in a narrower space, and less important in the information hierarchy.
Just a simple fix, increase the body text size.
Grungy. Stylish. Awesome. However, the body text is just too small, and particularly difficult to read when the background fades into a light colour.
Just up the size a point or two to help.
Nice little details and design by Cara, but the grey on grey lacks contrast, and the small font size just makes reading comfortably nigh impossible. It gets worse in the comments section.
It could do with slightly larger text for some people, but I don’t think that’s necessary. Just more contrast required. if you want people to read your content, make it easier for them Cara.
Can anyone read anything on this site? These guys clearly have talent, but even with the slight increase in font size in their blog, it still isn’t easy to ready due to the lack of space between baselines.
If you want people to read your content, give the typography a bit more attention guys.
The Serco Transarctic Expedition
The slight lack of contrast here isn’t a huge issue, but the font size is. To make it worse, the featured story at the top stretches so wide, I just can’t read it. My eyes want to shift down to the next line when I’m only half way across.
Without changing the layout, an increase in font size, and word spacing would help here.
coda.coza (No, nothing to do with the app)
An awesome dark design by Damien du Toit, and to be honest, I’d pass over the tiny type on the homepage if the text was more legible in the blog, but it isn’t. It’s all just too tight, and I get tired just wondering whether I should read it or not.
Put simply, the width of the main body requires the text to be larger, and even more importantly, more line spacing.
I came across this site from the WeLoveWP gallery, and I liked the use of colour and the nice graphical design. However, it was frustrating to read the small font size, more because of the lacking of leading.
Increase the line height, and maybe even the word spacing to help with legibility. It’ll polish off the nice design, Michael.
Is it really that important?
There seems to be a trend among designers in particular, to use tiny type. The thought is that large type looks clumsy, and belongs in a ‘Peter and Jane’ kids story book. But, the fact of the matter is that web typography is not the same as print. Small type is ok, but it shouldn’t be used as the main body text, which you want people to be read easily.
Contrast greatly varies from screen to screen, and used intelligently, you can use a range of contrasts to draw the eye to the important areas. However, lowering the contrast to the point where some users are squinting, or tilting their screen in order to see it, defeats the purpose of the text being there in the first place.
The beauty of CSS, is that you have options. Take time to experiment with line, word, and letter spacing, various fonts, and sizes, in order to make your web typography more attractive, and legible.
Hey, thanks for referencing my site as beautiful, and thank you for your kind comments.
As for the text problem, I think the size is fine, but I’ll be implementing a cookie-based preference like John Gruber’s: http://daringfireball.net/preferences/
Out of the few complaints I hear about my site, font size is the most prevalent. I figure if a user cares enough about the font size, they wouldn’t think it too hard to set a one-time preference. What do you think?
Cameron - No problem, it’s deserved.
It’s interesting that you should mention Daring Fireball, I nearly included it in the list, being completely unaware that John has a preferences setting on his site.
I think implementing such an option would be a wise idea. I mean, I know most of your visitors are probably aware that they can change it themselves, but I suppose I feel it’s better to play safe.
Thanks for including me! I have actually been considering changing the brown text on my site to be slightly higher contrast. I haven’t decided, yet, though. I still believe that, on a properly calibrated screen, my text is well-within the bounds of legibility. However, I do recognize that not everyone has a perfectly-calibrated screen. So, I’m thinking about it…
Also, I would encourage you to think about designer’s personal sites (which most of these are) a bit differently than commercial work. While some of us may push the bounds of what works and what doesn’t in our personal projects, most of us have the good sense not to do so on a more “serious” site. We’re just having fun and trying something different. I think that’s exactly what personal sites for for!
Thanks again for including me. Totally respect your opinion!
One out of three people have eye problems and it is highlighted more on a computer screen.
My biggest problem with 90% of all websites is the small print. I personally think all font should be at least 16 px. I tend to find myself ‘ctrl +’ most websites.
Jeff - Yeah. The vast majority of your visitors are going to be designers themselves, or those who are interested, so they’ll understand your thinking in de-emphasizing the less important elements. However, out of those, I’d say very few regularly work from a well calibrated screen.
I’m also aware that the majority of these are ‘personal’ or ‘portfolio’ sites, and so it can be more of a ‘design playground’ than wanting to achieve maximum practicality. I fully understand, because my personal site is the same. But, it made a good topic for a post, did it not? I mean, I could have dug up a heap of useless designs with illegible type in 10 minutes. The challenge was to find beautiful ones, and it did prove quite difficult, and meant I had to be picky with a few
Thanks for stopping by too. It’s somewhat of an honour. We ‘L plate’ designers, are watching and learning from the likes of yourself.
Jermayn - Glad to have you here my friend.
You’re right about the eye issues. I know mine aren’t as good as they once were, and it may be coming to the stage where I’ll need to go and get glasses for reading and using the computer.
However, my own opinion is that 16pt (depending on the type used), is a bit of a tall order to ask designers to use regularly. Most designs will not be enhanced with type so large. 12-14 is where I normally play
Good to see you pick out Design Observer. There’s absolutely no denying the quality of their content, but I’ve often steered clear of reading articles on their website purely for the tiny type issue.
Hi Armen.
Stumbled on this post via Google and after realising that you’d included two of my sites, felt compelled to leave a word or two.
I completely agree with you on both accounts. Serco TransArctic, which is no longer maintained (as is evident by the defunct Flash detection, ugh), was more of an attempt at pushing the envelope of standard-based design with a strictly-CSS layout, inline with the nature and subject of the site. It mostly worked 4 years ago when smaller viewports were more popular, but has unfortunately aged very badly and now only serves as a test case for why 100% width, liquid layouts are generally impractical for text-based content.
As for my own site, the legibility of my type has been the biggest criticism since I launched the design (also 4 years ago), but I’ve always maintained that it’s a designer’s site, and never intended for my blog to become the focal point - but rather more of an experimental ‘design playground’ like you put it.
As it happens, I’ve grown sick of the design and am nearly finished with a complete overhaul. I’d love to get your feedback when the new design launches. Cheers!
Legibility should be a primary design consideration ahead of how ‘pleasing’ a smaller font size looks: using cookie-based workarounds fudges this issue.
Another example of a designer (typographer no less) who is infinitely more talented and knowledgable than me but who makes a basic readability error is Mark Boulton. Would the site suffer if the font size was increased a tad?
Interesting article, by the way. Guess it demonstrates how web designers still put aesthetics before usabilty (although I’d argue that a highly usable site is an aestherically pleasing one).
David - Agreed.
You know, any time I’ve been tempted to use small type in my designs, I think of you David. I don’t know why. I guess I appreciate the fact that you’re a professional, and highly capable designer, and yet you always place usability slightly ahead of aesthetics. Not that you don’t give careful consideration to what it looks like, but you just won’t sacrifice the practical side in order to achieve a certain ‘look’.
coda - It’s always good to Google your name now and again, just to see what people are saying about you
A couple of things;
i) I had no idea you were responsible for two of the designs
ii) I had no idea how old they were.
You’re obviously greatly talented, and I’m excited to see what you’re currently developing for your own site. Please, if you don’t hear from me shortly after you launch, pop over here and let me know.
Leon - I tend to agree with you concerning the ‘workarounds’. It’s not something I’d like to make a habit of in my own work, that’s for sure.
Also, as much as I really admire Mark’s work, I’d have to agree when it comes to his own site. I’d love to hear his reasoning for having such a small type size. I can’t help but think someone of his calibre would have a legitimate reason, although I can’t think of what it might be.
That’s funny you think of me when small type design crosses your mind.
I’ll consider it a compliment as to the legibility of my blogs.
David - Yeah, it is funny. I suppose you’re just one of the design related folks who I follow, and keep in contact with.
Please do consider it as a compliment.
Thanks heaps for the mention. While the feedback for my wee site has been really positive, you’re not the first to mention that the font size was a tad on the small side. In my case at least, I never really wanted people to take much notice of what I’d written so I intentionally kept the font fairly small.
I still want people to focus more on my portfolio pieces, but I’ve since bumped the font size up a bit.
Steve - No problem. Thanks for dropping by.
Your site looks much improved now, with that simple edit. Why would you not want people to know that you’re an experienced graphic designer? Let them know man. There are uneducated, talentless nit-wits who are trying to compete for a piece of the pie. I say let people know what they’re paying for
I must admit that when I was putting the site together, I was not really intending my site to be seen by the wide audience it has now. I really just wanted to send out the link to a handful of people in the design industry in the hope of picking up the odd project and it was quite by surprise that others picked up on it. I will definitely be wiser when I approach my redesign
Steve - CSS galleries have a huge following these days, and if you create something which stands out, you’ll get traffic. Then of course, if it’s good enough, it gets mentioned in articles like this one
I look forward to seeing what you put together in the future. Be sure, if you can remember, to let me know.
This is a very original and brave article. Thanks for pointing it out… could you recommend anything for my website?
Jacob -Nothing major in regards to the typography. The biggest distraction on your page is the Adsense below the post. Just removing the border around it would help considerably though.