font-family is one of the most widely used CSS properties, and with good reason: sometimes you can change the entire feel of a design with this one property. But selecting fonts for your stack also greatly influences your design’s readability and accessibility- which, ultimately, is what’s most important in any web design. That is, if you want your visitors to actually read your content.
The font stack I use most commonly is:
font-family: Arial, Helvetica, Tahoma, sans-serif;
Use this, and you can’t go wrong- because nearly everyone has Arial, Helvetica or Tahoma installed on their computer. And in the off chance that they don’t, the “sans-serif” in there will use a similar font that they do have installed.
Sometimes, though, if I’m feeling a little saucy- or have fallen in love with a particular font- I’ll do something like this:
font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
By sneaking in a “Myriad Pro” at the beginning of my font stack, I’m making sure anyone who has the font installed will see it when viewing my page. (This is just an example, by the way- I’ve long gotten over my love-affair with Mr. Myriad). The point is that you can do this with any font of your choice- just as long as you keep the rest of the “safe” fonts in the stack.
Now, Myriad Pro is a fairly common font. It was Apple’s official corporate font, used in Wells Fargo’s identity, and comes packaged with Adobe Reader. So it’s safe to say that a lot of users will have it installed. But what if the font you want to use is a little more obscure? You can do the same, tacking it onto the front of your font stack- or you can take control and use sIFR or FLIR, two methods that are easy to use- although a little more involved. Still, I recommend that you use these methods only for headers or titles.
When deciding what fonts to use in your stacks, I recommend taking a look at Code Style’s Most Common Fonts List, which is updated regularly, and is totally fascinating for geeks like me.
What fonts do you use in your stacks? Do you use sIFR or FLIR?
*Update: Also check out Cufon, another alternative to font embedding. Cameron Moll discussed it here, with some lovely test pages. Thanks to Wes Baker for his comment!
