CSS: Fonts Stacks

CSS: Fonts Stacks

/**
*
* Font Staks
*http://sixrevisions.com/css/css-typography-01/
*
* Wide sans serif: Verdana, Geneva
  Narrow sans serif: Tahoma, Arial, Helvetica
  Wide serif: Georgia, Utopia
  Narrow serif: Times, Times New Roman
  Monospace: Courier, Courier New, Lucida Console
*
*Dreamweaver’s defaults
*Arial, Helvetica, sans-serif
 Courier New, Courier, monospace
 Times New Roman, Times, serif
 Georgia, Times New Roman, Times, serif
 Verdana, Arial, Helvetica, sans-serif
 Geneva, Arial, Helvetica, sans-serif
*
*http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ 
*TITLES [ GREATER THAN 12PX ]:
font-family: Ideal, Alternative, Common, Generic;
Ideal – Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
Alternative – When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
Common – At this point, you just need something similar that is not going to break your layout.
Generic – Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.
PARAGRAPHS [ LESS THAN OR EQUAL TO 12PX ]:
font-family: Ideal, Fit, Common, Generic;
Ideal – Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.
Fit – Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.
Common – Something similar in flavor and well-represented.
Generic – Again, finish with the generic classification.
Keep in mind that if your ideal font is only well represented on Macs, for example, you may want use an alternative that is more prevalent on Windows machines. For more information on the prevalence of certain typeface on certain operating systems, take a look at codestyle.org/css/font-family/.
STACK YOUR DECK
Now, using these guidelines, and building on the experience of much more knowledgeable type gurus, I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes:
p – balanced for paragraphs or body copy
t – balanced for headlines or titles
Arial, “Helvetica Neue”, Helvetica, sans-serif - p, t
Baskerville, “Times New Roman”, Times, serif - p
Baskerville, Times, “Times New Roman”, serif - t
Cambria, Georgia, Times, “Times New Roman”, serif - p, t
“Century Gothic”, “Apple Gothic”, sans-serif - p, t
Consolas, “Lucida Console”, Monaco, monospace - p, t
“Copperplate Light”, “Copperplate Gothic Light”, serif - p, t
“Courier New”, Courier, monospace - p, t
“Franklin Gothic Medium”, “Arial Narrow Bold”, Arial, sans-serif - p, t
Futura, “Century Gothic”, AppleGothic, sans-serif - p, t
Garamond, “Hoefler Text”, Times New Roman, Times, serif - p
Garamond, “Hoefler Text”, Palatino, “Palatino Linotype”, serif - t
Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif - p
Geneva, Verdana, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif - t
Georgia, Palatino,” Palatino Linotype”, Times, “Times New Roman”, serif - p
Georgia, Times, “Times New Roman”, serif - t
“Gill Sans”, Calibri, “Trebuchet MS”, sans-serif - p
“Gill Sans”, “Trebuchet MS”, Calibri, sans-serif - t
“Helvetica Neue”, Arial, Helvetica, sans-serif - p
Helvetica, “Helvetica Neue”, Arial, sans-serif - t
Impact, Haettenschweiler, “Arial Narrow Bold”, sans-serif - p, t
“Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif - p, t
Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif - p
Palatino, “Palatino Linotype”, “Hoefler Text”, Times, “Times New Roman”, serif - t
Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t
Times, “Times New Roman”, Georgia, serif - p, t
“Trebuchet MS”, “Lucida Sans Unicode”, “Lucida Grande”,” Lucida Sans”, Arial, sans-serif - p
“Trebuchet MS”, Tahoma, Arial, sans-serif - t
Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t
**/