Not always, but most of the time I stick to Helvetica for titles and Verdana in CSS files. The vast majority of web designers have a very few number of fonts that they prefer. It’s not that there isn’t the choice of fonts available, it’s because of poor support across the various operating system.

This guide reveals that the fonts available across both Windows and Macs are Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS and Verdana.

And that’s it! Even my precious Helvetica is not available across the board as it does not come shipped with Windows.

Obviously specifying a font that isn’t available will lead to all sorts of trouble so web designers counter this by creating a fall back list. The pre-configured Dreamweaver choices are:

• Arial, Helvetica, sans-serif
• “Times New Roman”, Times, serif
• “Courier New”, Courier, monospace
• Georgia, “Times New Roman”, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

So taking the first line as an example, the first choice is Arial but if that is not available on the operating system then it falls back to Helvetica, and if that is not available it requests the machines sans-serif as a last resort. In CSS these are called font stacks.

Much of what web designers use as their choice of font comes through experience.
For instance, a much under discussed problem is that of cheap (standard?) LCD screens that bleach out colour and make the smoothest of font curves resemble a jagged cliff edge, and I’ve found that as long as they are less than 20px then Helvetica and Verdana are best able to deal with the large variety of screens on the market.

When it comes to font stacks Nathan Cord at Unit Interactivehas graciously bestowed his font stack wisdom to us.
The font stacks below are based on grouping fonts together from the same type classification or the same type designer.

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
• GillSans, Calibri, Trebuchet, sans-serif – p
• GillSans, Trebuchet, 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, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif – p
• Trebuchet, Tahoma, Arial, sans-serif – t
• Verdana, Geneva, Tahoma, sans-serif – p
• Verdana, Tahoma, Geneva, sans-serif – t

I would wager that a finer list of appropriate font stacks can’t be found anywhere else on the web.

Leave a Reply

Your email address will not be published. Required fields are marked *