Use Lucida, Lose Your Readers
I’m sure, like me, you’ve come across sites which seem reasonably well designed but where the font looks all wonky and manky, as if it got rendered at a different size and scaled down using a nearest-neighbour transformation *. I came across one today and decided to get to the bottom of it. (For the record, it was for this interesting-sounding SEO tool.)
The cause? Not the use of <font> tags — though what the hell are they doing there? — per se, but their insistence on face="Lucida Sans". Strip them out, or bung in an accepted web font like Arial, and the lumpiness disappears.
Shame, really, ’cause Lucida Sans is a great font, but it clearly doesn’t scale well, or at least not the version installed with XP on my PC. (And no, it’s not the browser. IE6 & 7 make as much of a mess of it as Firefox does.)
Makes you wonder why the designer thought it worked. The stylesheet (yep — he or she did know about CSS) specifies an unusual body font size of 78.5% and if I could be bothered I reckon I could use this to figure out their monitor resolution. It must have been a lot of dots per inch, as there are certain high magnifications where the text looks as Charles Bigelow intended. 140% in IE7, for example.
So add this to the usual admonishments about specifying font sizes and the like: don’t be tempted to stray from standard web fonts or, SEO company or not, you may drive away visitors with unreadable text.
*My best guess is that this is exactly what’s going on.
Interesting. I specify “Lucida Grande” followed by “Lucida Sans” at 100%. I do not have Grande on my XP laptop, but running at 120 DPI with Clear Type, the Sans looks terrific (I think).
I was mortified last week when I saw it at work on a regular desktop, running at more usual 96 DPI. As you say, it looks terrible.
FWIW - I leave main body text scaled at 100% so it may be more than a scaling issue.
Comment by David Hucklesby — April 12, 2007 @ 7:06 pm
When you choose Lucida Sans you need to understand what you’re specifying and specify what you mean: http://mrmazda.no-ip.com/auth/Font/fonts-comps-lucida.html
Back when Web 1.0 was new, this was what Lucida Sans meant: http://mrmazda.no-ip.com/SS/font-lsansi.gif
On many systems that’s still what happens.
OTOH, Lucida Sans Unicode has unusual leading, so if you mean to specify that, you probably need to specify line-height explicitly: http://mrmazda.no-ip.com/SS/font-lsansuni-ldr.html
Comment by Felix Miata — April 12, 2007 @ 10:24 pm
“Lucida Grande”, must be a MAC font no? And “Lucida Sans” renders as a sort of ITALIC font, looks horrible. But, “Lucida Sans Unicode” looks fine at all res, and all font size increases via the browser.
A site I did a few years ago shows the successful use of http://www.phoenix-tenant-representation.com “Lucida Sans Unicode”
Comment by Al Guevara — April 12, 2007 @ 10:51 pm
I have just noticed that if I turn on ClearType, the font rendering on that page looks much better at my default size. Still looks bad at some other sizes, though.
Comment by frontend — April 24, 2007 @ 12:40 pm