Guide to CSS Font Stacks: Techniques and

Resources

Cameron Chapman

CSS Font stacks are one of those things that elude a lot of designers. Many
stick to the basic stacks Dreamweaver auto-recommends or go even more
basic by just specifying a single web-safe font.

But doing either of those things means you՚re missing out on some great
typography options. Font stacks can make it possible to show at least some
of your visitors your site՚s typography exactly the way you intend without
showing everyone else a default font. Read on for more information on
using and creating effective font stacks with CSS.

Creating Your Own Font Stacks

There are a huge variety of font stacks recommended. It seems every
designer has their own favorites, what they consider to be the “ultimate”
font stack. While there is no definitive font stack out there, there are a few
things to keep in mind when using or creating your own stacks.

First of all, make sure you always include a generic font family at the end of
your font stacks. This way, if for some strange reason the person visiting
your site has virtually no fonts installed, at least they won՚t end up looking
at everything in Courier New. Second, there՚s a basic formula to creating a
good font stack: ̒Preferred Font̓, ̒Next best thing̓, ̒Something common and
sorta close̓, ̒Similar Web-safe̓, ̒Generic font՚. There՚s nothing wrong with