is now an archive and is no longer updated, you can find new writings at →

08 12 2007

Meanwhile sans-serif fonts run in fashion cycles between Arial and Verdana with a spurt of Helvetica, Trebuchet or Tahoma use coming and going. Most of the remaining web-safe fonts are either mainly useful in certain applications, such as Courier or are a sin to use in most of the design community (Comic Sans).

There are also a few variants of web-safe fonts that receive little attention, such as Arial Narrow, which is much more prevalent on user’s systems than Helvetica, and does a better job than most of the sans-serif fonts for headlines. Lucida Grande has seen a rise in popularity on the web, even though it’s primarily a Mac based font by default, much like Helvetica.

While I love Georgia and Helvetica primarily out of the current nine, there are a few fonts that have been shipping for seven years on both major operating systems:

All of the above fonts are shipped with Windows 2000/XP and have been included on the Mac OS since for a similar period of time. However, none receive more than limited use on the web which is quite the shame.

The point is that CSS offers us font-families to help browsers gracefully degrade in a manner that we choose. So why not set the primary font to something more suitable to your uses? There’s nothing wrong with setting a lesser used font at the fore-front of your font-family declaration if your site still maintains the intended effect with a non-optimal type-face.

While using such type-faces can distinguish you from the herd, you shouldn’t use them just because. Every font has a subliminal interpreted feeling that as a designer is usually the focal point of the decision of what font to use. There are also creative ways of using the existing web safe fonts, unusually large sizes, line-heights, kerning, etc. can all create new visual cues that a designer can use to their advantage.

If you’d like to do a bit of your own digging, you may wish to look through the default font lists for Mac OSX and various Windows releases.



  1. your ul section seems out-aligned, is it by design?

  2. Very nice article, I enjoyed reading it. I once read though, that it’s a ’sin’ to use the font Impact on the web, don’t you think the same? What is the mac equivalent of Impact anyway?

    Nice read - I’ve been meaning to, and no I am going to widen my selection of fonts on the web.

  3. firman firdaus - bullet points, traditionally, are meant to be ‘out-aligned’. It’s only the constraints of HTML that have made them indented on websites, so CSS allows them to be back in their correct positioning.

  4. Eli: While not on the level of Comic Sans, Impact is a font as a designer I would tend to shy from as it is one of the “general use” fonts that became prevalent in the early desktop publishing days in the same vein as Modern, Roman, Script, etc. created to help ease the mind of the non-designer from memorizing the names of fonts and their look. So in a way, you are correct that it may be a “sin” to some designers, but the number of zealots calling for a ban on it aren’t even close to that of Comic Sans. The Mac equivalent is simply known as “Impact” as well.

  5. I also find real web typography to be largely ignored and I’ve noticed Century Gothic being used on occasion, but if you look at it’s application - especially when in smaller point sizes - it becomes very difficult to read and I think that can be a deterrent to certain visitors. It one of the most beautiful fonts but if its not anti-aliased it can be risky.

  6. Ian: I know what you mean, in fact if you look closely all of the <small> tags on this site are using Georgia because Palatino doesn’t render well at that small of a size due to similar complications. So while Century Gothic would be nice for some elements you may need to use Verdana or Arial at smaller sizes.

  7. Very interesting article. In my endeavors as an amateur web designer I have spent countless hours searching for a font that I thought would flow with the rest of the page as well as not being overused.

    In my very early attempts I was a fan of Trebuchet for things such as navigation tabs, headlines, and even occasionally for offset information boxes. As I grew in familiarity with design concepts I noticed it, too, was somewhat overused. I migrated away from it some time after that.

    I’d also like to note your point on Arial Narrow. While it is a fine font, it can look very odd on different resolutions. I noticed this while I was forced to work on a friend’s mini-notebook. After reaching my design I realized how exaggerated the font looks on such a small screen.

    I too am a sucker for Georgia and Helvetica. However many times they are used, it does not change that they are beautiful fonts and tend to make your page come together.

    Thanks for the article, Kyle. Very informative.

  8. Great post Kyle! In print design and when working on identities I spend a lot of time on typography, however for web copy it tends to be an after thought. Thanks for pointing out a few more options that we have as well as reminding us that you always have the font-families as a backup.

    Curious what you think of SIFR and other replacement techniques for use in headlines?

  9. Rett: I’m a big fan of sIFR as its far more accessible than any image replacement technique could be. I’ve used it on a few freelance sites to good effect, and plan on continuing to use it for headlines.

  10. I meant to write ‘now’ instead of no in my above comment… I’m going to widen my selection of fonts on the web now ;)

  11. A little bit OT: This is quite a resource if you want to adapt your typography for Linux-users -> - Linux Fonts Equivalents. Thank you for a great read.

  12. Great article! Thanks, web typography is so often ignored. Thanks!

  13. Robin: That is indeed an excellent resource, thank you.

  14. Very interesting article. Web typography is a much overlooked subject.

  15. Not so fast! I can’t speak for arial, but Verdana and Georgia were specifically created for reading on screen, which, though somewhat limiting, gives them a certain superiority to other fonts. For headings and other large type items I completely agree that the traditional web font libraries should be expanded, provided appropriate CSS fall backs are in place.

    Paul: It’s not the “constraints of HTML” but the default browser display properties. Indenting began as a result of the prior limitations of desktop publishing software which I guess carried over into the early browser market.