Which Fonts Are Web-safe in 2009?

Below is an excerpt from Issue 56 of the Sitepoint Design View newsletter that I found very interesting and useful. Perhaps you will too.

Alex Walker

design@sitepoint.com

Editor, SitePoint Design View</p>

For the past five years, Codestyle.org have run an ongoing font survey, analyzing the system fonts of visitors to their site. Although the sample group is likely skewed towards the designers and developers that frequent their site, it’s arguably still the best information we currently have on font availability in 2009.

Although it’s true that the Web’s font ecosystem evolves at a glacial pace, sometimes years can pass without us considering what fonts are currently available.

Today I thought we might have a fresh look at the font landscape, and consider some options that might bring freshness to your design without any loss of compatibility.

Palatino Linotype (Win)

At the risk of illiciting a duh from those who use this font often, I’m starting out with Palatino Linotype — in my view the Web’s most under-utilized font.

Why? Well, firstly it has a great pedigree. The original Palatino was a graceful calligraphic serif designed by legendary type designer Hermann Zapf in 1948.

Microsoft then employed Hermann to revise the font for screen usage in the Windows 2000 release, giving us Palatino Linotype. The font has since been included with Office 2003, Office 2007, WinXP, Vista, and presumably Windows 7, making it virtually ubiquitous on the platform.

Palatino Linotype is friendly yet refined, classy but informal in larger type sizes and still reading well down to 12px.

Despite these many and varied attractions, it’s still surprisingly little used online. Google reports the text fragment ‘font-family:Palatino Linotype’ appears 7,750 times, compared to 617,000 for ‘font-family:Times New Roman’. Amazing really.

And this despite the fact that CodeStyle now reports Palatino Linotype as far MORE common (97%) than Times New Roman (88%).

Some might argue that both Georgia and Constantia are similar and prettier (but less common), and I’ll happily agree and encourage you to list them first in your stack.

Regardless of your number one font choice, I think you would have to question why you’d ever list Times New Roman again. Period.

Century Gothic (Win)

I’ve always liked the clean geometric lines of Bauhaus design so I have a soft spot for Century Gothic.

Designed as a revival of Sol Hess’s 1930s-era Twentieth Century, Century Gothic is a very engineered yet elegant typeface. I’ve seen it used on everything from cosmetics to horse racing to prestige hotel sites.

Although I prefer to limit its use to headers, subheaders, and opening paragraphs, it still reads well at 12px — though it’s arguably uncomfortable [KS: or uneasy or awkward] on the eye in large slabs.

Shipping with the last two versions of MS Office, Century Gothic is reported to be present on a respectable 85% of PCs. MS Trebuchet (96%) provides a visually passable fallback on Windows and Futura (90%) provides a good match on Macs.

Nice.

Calibri (Win)

Calibri is, I believe, the best san-serif option of the clutch of new fonts released with Microsoft Vista, Office 2007, and Office 2008 for Mac.

Unfortunately, the less than enthusiastic uptake of Vista has slightly stunted the proliferation of what is a very good screen font. Currently none of the new fonts released with Vista are even a 50/50 chance to be found on any given Windows system. And that’s a little sad.

However, if you’d like to own Calibri (or any of its sibling fonts, Candara, Consolas, Cambria, Constantia, and Corbel), they are generally available.

Last time I checked, all of these fonts were freely included with:

Calibri is always described as a humanist font, which I think makes it the kind of font you’d be pleased to take home to meet mother. It’s approachable and a bit touchy-feely, and does its best work as body text.

There are two small caveats to using it, however:

  1. A rendering bug in Firefox 2 caused some of the Vista “C” fonts to disappear at certain sizes. Be sure to thoroughly test your pages in that browser before settling on it.
  2. Calibri seems to render smaller on the Mac, so be careful using it with layouts that require your text to fill a certain amount of space.

Lucida Grande (Mac)

Okay, so if you’re a Mac user, you’re likely to be intimately acquainted with Lucida Grande by now and probably rolling your eyes at this recommendation. In fact, you probably see it everywhere you go, from CSS Zen Garden to Facebook.

However, if you’re a Windows user who routinely lists Helvetica as “the Mac font” — and you could do worse — Lucida Grande is for you.

The original Lucida fonts were designed by Charles Bigelow and Kris Holmes in the mid-eighties. More of an extended font clan than nuclear family, Lucida now contains more than a dozen variants — including serifs, san-serifs, handwritten, and calligraphic styles, and even mathematics and specialized fax faces.

Lucida Grande is installed with all OS X installations and Code Style reports it present in over 90% of surveyed machines.

The cool aspect for Windows users is that the font comes free with Safari for Windows. All you need to do is locate it in the Safari folder and copy it to the fonts folder:

C:\Program Files\Safari\Safari.resources

Grande is awful purdy for body text, and it has decent Windows visual equivalents in Calibri (mentioned above), Lucida Unicode, and Trebuchet MS (in that order).

It does seem to render a little smaller on the Mac, so be aware of that when testing. Otherwise, consider giving Helvetica a breather.

Written on March 14, 2009