Monday, February 5. 2007What the large font giveth, the small font taketh away
People read big fonts, whether they like it or not. There is now in fact an Easy to Read Standard for the net which may well be the most important adoption we'll see in 2007. Well it's certainly a better CSS trick than gradients,drop shadows etc. It pisses me off that I have to type this, but none the less... Update: At the time I reviewed this site, the CSS was not working correctly. The majority of the issues raised in this article have been corrected, such as blue on blue, or the 10px fonts. I'm leaving the article here as a demonstration of why 10px fonts or poor contrast are site killers. Also, unfortunately the print css is still somewhat lacking. 10 pixel font sizes are too bloody small!How is it that professional web designers can go through all the motions of site design, from "branding" to Information Architecture, all the way down through wireframing and compositions, and NO one is capable of saying "Hey lads, no one can read that font, it's too small". No even thinks of saying "Lads, blue on blue probably isn't a good idea". Lets look at the Times Online. 
Legibility is the all number #1 problem with websites You might be thinking, "I can read it, so whats the problem". Good for you, you either sit too close to your screen or you have excellent eyesight. Jakob Nielson has ran plenty of studies on Web Usability, and guess what the all time number 1 problem people have is? Legibility. People can't read your website. Usually due to 2 reasons, bad contrast (gray on white), or poor font size (<12px). Some designers seem to think that a website is only cool if it causes you headaches to read. Compare the above shots from the Times Online with this... 
That was take from the easy to read standard. Whether you know it or not, proportional line heights and proper font sizes increase legibility (and comprehension) by literally hundreds of percent. You probably read most of that paragraph by accident, its just easy to read. The way the net should be. PrintingAnother ridiculous screw up from the Times Online, is that they actually make the page just as retarded when it's printed on paper. Print CSS is really really easy. Take a Print Preview of this page for example. What do you get? Content. Take a Print Preview of the times online and its just as bad as the website, with all the advertising included as well. You even get the "Add comment" box. Its funny how a newspaper never bother checking what their articles look like printed If you run a site, and you haven't considered what it looks like when printed, please have a look. A simple improvement would be to add the class "noprint" to anything you don't want printed, and set .noprint{display:none;} in your print.css. Jeff Atwood provides a concise introduction over at Coding Horror. Bubbl.usProbably unrelated to my article, Bubbl.us have added a section to their homepage that explains what it does, why you'd use it, how it works, and so on. This is great to see, and its a nice STFU to the idiots who told me I had no idea what I was talking about. Feedback/CommentsIf you've seen any tragic font-sizes or contrasts leave them in the comments. Maybe we'll improve the web pixel by pixel. Trackbacks
Trackback specific URI for this entry
No Trackbacks
Comments
Display comments as
(Linear | Threaded)
Hi Des,
The Easy-2-Read Standard is good. Thanks for the link, I completely missed it for some reason. I agree font size is still a key problem with the majority if new web design today. Do you think people are still obsessed with content quantity over quality? I find setting my font size correctly and then creating content under this constraint is very useful; it keeps my text short and sweet. PS: You were right about Bubbl.us, they definitely needed some explanation on their site.
Hi Eoghan,
I'm not sure if they obsess over quantity, it's just that they're too lazy to actually write proper concise content. It reminds me of that quote... "I did not have time to write you a short letter, so I wrote you a long one instead" It's just easier to write 3 paragraphs of rambling to come up with good original content. I think this 37S post does a good job of discussing it... http://www.37signals.com/svn/archives2/the_positive_side_effect_of_big_text_less_text.php
I just stumbled upon the Times redesign via John Gruber, and started thinking that they hadn't tested their stylesheets in Safari. You mentioned the blue text on blue and charcoal grey backgrounds, which are two of my biggest gripes, but what really got me was the leading on many of the headers and pullquotes.
I just wrote such a long comment that I decided to make it a blog entry myself... (and at least we can bump the font sizes up using our browsers... not much consolation though)
I find almost no website that I visit (and I visit quite a few) have too small font, even your website I had to enlarge by one (in Firefox).
I think most people know how to enlarge font but I still think for the people who do not, you should design the font large than what people normally do. Good article mate 
Hi Des,
I work at Times Online. We had a huge server problem yesterday, and you've been reviewing our new site on pages where the CSS has broken. We're not really crazy enough to run body copy in blue-on-blue or try to teeny tiny type. Apologies for the server problems, but it's a bit like reviewing a copy of a newspaper that has been dropped in a puddle and complaining that our crazy 'all pages stuck together and wet' design is a bit sucky. Anyway, I'm going to do a roundup of blog reviews this morning, and I'll link to you - but it would be great if you could come back today (the site is much healthier, although still not 100%) and have another look. Thanks, Tom Whitwell (Online Communities Editor).
My Apologies Tom,
I knew something was lacking when I saw John Gruber praising the new design, then I checked it again this morning and everything seems to be working well and looking legible. I've updated the post accordingly. Des
um, you're not really in a good space to be lecturing about legibility, mr. white-text-on-black-background.
Dan,
If Light on Dark is a problem, use the alternative style sheet I provide. I figured it would be a matter of time before someone wrote that thought To be honest I'd like to see some recent research that shows Light on Dark is significantly less legible. I believe it was true in the days of 15" CRTs , but I'm not so sure anymore. Des
Like you, I also prefer light on dark. I have seen mention of studies that claim that the readability is better with dark on light, but I wonder how much of that is due to familiarity. It seems to me that it would be pretty hard to do a non-biased study -- any population of study participants is too likely to have way more experience reading dark on light (i.e., ink on white paper) for the study to be fair.
maybe you should check your darkonlight style.
commenttext is way too small, the update box is middletonegrey on darkgrey -> unreadable. and something with the title is messed up too (it is partly hidden in some positioning mess) Firefox 2.0.0.1 on Windows sorry for pointing out the obvious
Des: you need to eat your own dog food. Your font sizes are acceptable, but this color scheme is headache inducing. Grey on black, white on grey?
Devin, I'll have a think about it. For what its worth this is the first time in 30 posts that anyone has complained about headaches while reading.
Light on dark is less legible than dark on white. For most people, it doesn't matter, but some people just have problems with it. I think, to some extent, it's just familiarity, but studies show that black on light is most legible. (see homepage link)
The reason for the small text, and light-on-dark, and a host of other readability problems stem from a whole other bias: age. Web designers tend to be younger than other designers. They have better eyesight. Hard-to-read for you probably looks okay to them. Also, all designers share another bias, which was thrown into high relief back when WiReD was launched in the early 90s: they are better at comprehending complex visual information. It makes them good at their jobs, but, it also means that things they make for themselves may be visually challenging for everyone else.
Hi John,
I had previously read those Wichita studies, they do really excellent work over there. What I am wondering is have any studies on light-on-dark been done recently. I agree with the rest of your points, Des
The problem that I have with light text on a dark background is that it leaves me seeing spots in a similar way that looking directly at a lit light bulb does. I have highly photosensitive vision and I always have trouble with light text on dark backgrounds. If there is a style sheet doing it I shut it off with Firefox and it is alright. If there isn't a style sheet and I really want to ready the article I type CTRL-A to highlight the text and make it slightly more bearable for me.
Thats fair enough Larry,
I do offer an alternative dark on light style, or if you prefer, you can use print preview to read the article in a familiar black on white. I am considering re-doing the site again, primarily cause I have learned a bit more about design since I did this. -- Des |
About:Switch to Dark on Light!
This website is the online diary of me, Des Traynor, a User Experience Researcher in Dublin, Ireland. I work with Contrast. I usually write on 5 topics: I update about 3-4 times per month. Be sure to subscribe so you don't miss this good stuff. If this is your first time here, check out the archives.My official homepage provides more information about who I am, and what I research. You can contact me at destraynor [at] gmail [dot] com Quicksearch |
{document.getElementById(%22switcher%22).style.display=%22none%22;document.body.style.background=%22#fcfcfc%22;document.body.style.color=%22#333%22;document.getElementById(%22blogbanner%22).src=%22http://www.destraynor.com/serendipity/templates/destraynor/header-alt.png%22;function%20changeSizeColor(tag,size,%20color){var%20elements%20=%20document.getElementsByTagName(tag);for%20(var%20i=0;i<elements.length;i++){elements[i].style.fontSize=size;elements[i].style.color=color;}}var%20all%20=%20document.getElementsByTagName(%22*%22);for(var%20i=0;i<all.length;i++){all[i].style.background%20=%20%22white%22;all[i].style.color%20=%20%22#444%22;}changeSizeColor(%22h1%22,%2232px%22,%22#333%22);changeSizeColor(%22h2%22,%2222px%22,%22#222%22);changeSizeColor(%22h3%22,%2220px%22,%22#111%22);changeSizeColor(%22p%22,%2216px%22,%22#444%22);changeSizeColor(%22a%22,%22%22,%22#cc0000%22);var%20paragraphs%20=%20document.getElementsByTagName(%22p%22);for(var%20i=0;i<paragraphs.length;i++){paragraphs[i].style.lineHeight=%22150%%22;paragraphs[i].style.fontFamily=%22Arial,Helvetica,Verdana,sans-serif%22;}})()){kind=link}