Better CSS Font Stacks

stack your deck

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

Web typography isn’t easy to get right, and this article is really helpful.

For my webdesign reference 😉

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

    This entry was posted in Art & Design. Bookmark the permalink.

    Comments are closed.