Font Stacks
Rather than fighting against the limitations of cross-OS compatibility, take advantage of the differences between operating systems.
I found this very interesting article about the usage and value in what the author calls “Font Stacks.” The term refers to the font-family code in CSS and using fonts that are specific to different Operating Systems prior to the base web safe fonts. For example:
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
In this font stack, there is a general order of Windows fonts, Mac fonts, Linux fonts and web safe universal fonts. Within each OS font set, you go from least commonly available to most commonly available. In the case of Windows for this example, Frutiger is the least common and Calibri is the most common (on every Vista machine).
So this seems like a bit of trouble, but what does it gain us? Given restrictions on the web, there are approximately 5 fonts that one can use with security. While they work, wouldn’t it be nice to have more options? Especially when the vast majority of users will be able to use one of the special fonts that you have picked out (he claims upwards on 90% of users).
It all sounds good, but there are still some problems. First off, the fonts aren’t exactly the same. By attempting to use more beautiful fonts, you lose control over the exact look and feel of the site. Furthermore, Vista fonts such as Calibri have a base size much smaller than other fonts. In the example above, you can see that Calibri is significantly smaller. As you can expect this may cause a problem in readability, so perhaps it would be better to avoid such fonts, but the choice is yours. A third issue is that one must increase testing to see what the site looks like on more machines so you can have a sense of how the font stack is affecting the feel. Finally, poor font choices in your stack will result in poor legibility if someone ends up with that particular font choice, so it is crucial that you pick and test!
Overall though, I am fascinated by the concept and plan on experimenting a bit with it myself! As much as I like web fonts for nostalgia, it would be nice to explore different options to develop even better experiences on the web.




No comments so far.