Web fonts can be nice (honest)
I ♥ Helvetica, it’s awesome. It’s been the staple of designers for as long as I care to remember. So lets have a big hand for, and give a tip of the cap to, our good friend Helvetica.
But here’s the thing I love other fonts too. Thats right folks, I’m having affairs with Georgia, Rockwell and Gill Sans to mention just a few.
With the progression of web 2.0 we’ve seen awesome functionality, great usability and lots of shiny-shiny sites, but we’ve still been stuck with a limited amount of fonts. Now that is slowly changing with the @font-face attribute (safari 3.1 support only I think), and flash replacement but it strikes me that we are still not using the few fonts we can play with to their full potential. So today Ladies and Gents, I present the case for these, somewhat under-used gems:
Georgia, you have the floor
I’ve seen quite a rise in sites using Georgia. alistapart & Matt are two notable examples. Georgia is a really nice serif font which looks especially good large and bold.
Rockwell, rocks, well
It’s installed on around 60% of computers so it has a case to be used at the top of a font-stack as it provides a nice alternative to Georgia, Times, Verdana or Courier. I’ve used it on this site for the larger headings. The only other site I’ve seen this used on is Sticky Eyes, though there are probably a lot more sites using it.
Palatino Linotype / Palatino
I really like this font. Jon Tan uses it so thats already a huge amount of kudos thrown its way. It’s installed on around 97% of P.C’s and about 80% of macs so thats another good case for using it. Again, put it at the top of your font-stack as some users still won’t have it installed.
Century Gothic – One for the Goths
With installation on 85% of P.C’s but unfortunately only around 50% of macs be sure to use this one carefully. It is a really nice, classic font that is used quite a lot off line. Once again include it at the top of your font-stack just in case some users don’t have it installed.
Getting the most from font stacks
Nathan wrote a nice article here on font-stacks which is a really good read. Taking his ideas on board here are my suggestions for using the above fonts in a stack. Remember, if the font has white space it needs to be in speech-marks.
For Georgia as the main font
- Georgia, Times, “Times New Roman”, serif
- Georgia, Palatino, “Palatino Linotype”, Times, “Times New Roman”, serif
For Rockwell as the main font
- Rockwell, “Courier New”, Courier, Georgia, Times, “Times New Roman”, serif
For Palatino as the main font
- Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif
For Century Gothic as the main font
- “Century Gothic”, “Apple Gothic”, Helvetica, Arial, sans-serif
Fun with fonts, but please don’t encourage Comic Sans
*Font stats taken from here. Correct as of July 2008