Over the course of several recent projects, I’ve been experimenting with some alternatives to the usual cast of web fonts (Arial, Verdana, Georgia, etc.). I know this is nothing new, as countless other designers have had other fonts grace their designs. While the results of my experiments often prove less than successful, I proceed to share my experiences in pursuit of documenting web font knowledge. After all, what’s a designer’s job without a little challenge every now and then?
For those living in the comfort of Arial & Co., do not take this as a discouragement from exploring the outer limits of web fonts, but as a warning of what lies ahead.
The Lucida Incident
font-family: "Lucida Grande", "Lucida Sans Unicode", →
Verdana, Arial, sans-serif;
Next to Helvetica, Lucida Grande is a font that I consider to be timeless and flexible. While Lucida Grande does not come standard in a Windows installation, a similar font exists in Lucida Sans Unicode, which meant that I could have my design look similar across newer Windows and Mac platforms. For a while, I considered Sans Unicode to be a worthy fallback for Grande in Windows. That was, before I discovered the problems that came with it. For one thing, it looks nothing like Grande at 12px, which happens to be one of the sweet-spot font sizes for all other web fonts. Also, when font-weight: bold;, Sans Unicode transforms into a kerned Verdana wannabe.
To be fair, Lucida Grande has it’s fair share of quirks. Windows users who have Grande installed on their PCs experience problems with some Grande-fonted form elements with width: 100%;. Luckily, this could be fixed by listing Sans Unicode first in the font-family style for input elements:
input {
font-family: "Lucida Sans Unicode", "Lucida Grande", →
Verdana, Arial, sans-serif;
}
Update 2007-03-14: A solution to the Lucida headaches is presented in my new article: Lucida Hybrid.
The Trebuchet Mishap
font-family: "Trebuchet MS", Arial, sans-serif;
Trebuchet MS can be a pain in the neck, although not as much as the Lucidas. At first glance, it looks like a sexy, curvy font to use, but that’s as far as I can appreciate it. While it does make for a nice heading font, its stunted x-height and semi-slender figure make it a less-than-ideal choice for text sizes below 13px. If you wish to take advantage of its curves, prepare spend some extra time tweaking font-size and line-height.
Thanks for posting an article on web typography that explores the alternatives to the default three. It’s good to have an article that is pitched neatly, too, in that midspace between designer and interface developer.
Thanks, Dan. Habit and convention have taught me to always design with the developer in mind, which is one of my reasons for looking into alternative fonts for the web. In a few months’ time, i’ll be revisiting this experiment in time for Windows Vista’s release, and the new set of default fonts that come with it.
I look forward to hearing your findings.
What abou Linux? I’ve recently isntalledubuntu as my main OS as opposed to the old winXP setup. It doesn’t have many commercial fonts for obvious reasons.
I’ve found inline font replacement with CSS background images works wonders and doesn’t seem to negatively affect SEO.
FYI, the only thing I msis from winXP is gmail app for file transfer in IMs, CounterStrike Source, and my business NetZero Voice app(it’s on mac and win32 only). Everything else for design is easilly available on Linux. Yay
There’s something special about giving back to the community by offering my support to new users. It’s just neat.
xsism: My experience with fonts on Linux is severely limited, but from what I saw so far, the DejaVu family of fonts looks like a good fallback set.
As for image replacement techniques, I do use them too, but only for headings and menu items.
xsism: You can easily (and legally) install the ‘web core fonts’ on Linux. For Ubuntu, just install the ‘msttcorefonts’ package.
As for other fonts, any TrueType fonts that you legally had under Windows, you should be able to use on Linux as well, unless for some perverse reason the licence prohibits this (which I really wouldn’t put past M$ to do these days..).
David: thanks for pointing that out. Is there something similar that would allow you to install Mac’s core fonts?