Web safe fonts

Sunday, May 10, 2009

During a recent project the bulk of the design work was outsourced and the designs that came back were laden with Arial Black headers. After the initial alarm bells subsuded I began to ask myself if the time had finally come when websites could let loose and go crazy—had the day arrived when the number of fonts choices crept passed seven? So I started looking…

Turns out everyone with access to a webserver has his own list of web-safe fonts. How can that be? Surely there must be some group, some dot-org out there who dedicates hours upon hours to bickering over the minutia of every serif to come up with an "official" standard. Unfortunatly none that I can find but luckily just about every site has the same basic definition for web safe fonts: a font that will display consistantly for all site visitors regardless of their browser or operating system. The difference between all these experts is their interpritation of the word all. Here is how it breaks down:

If you only care about modern versions of Windows (XP, Vista, W7) and OS X you have a whole slew of options:

quick note

Some of the fonts may not look correct on all browsers

Times New Roman

Georgia

Arial

Arial Black

Century Gothic

Impact

Trebuchet

Verdana

Andale Mono

Courier New

Comic Sans

But if you care about some of the not-so-modern versions of Windows (9x) and Mac Classic then your choices shrink or if you are worried about Linux & Unix users then you're out of luck. Well, not completely. You can use CSS

Times New Roman, Times

Arial, Helvetica

Courier New, Courier

So, it turns out that my unease with using Arial Black was completely justified and totally bogus. It simply boiled down to who the users will be. In truth I had always assumed a much more strict stance on what fonts were safe than needed for modern versions of Windows and OS X but I wasn't nearly as strict as I needed to be to please everyone. I suspect that for most projects I'll continue to land somewhere right in the middle.

One thing... don't forget that you always have the option to offer alternative fonts. If, for example, your design calls for Verdana it would be prudent to define it like this: verdana, arial, helvetica. This will cover all your bases even if some users see your site differently.