Whether you choose to use webfonts, web-safe fonts or roll the dice that the majority of your viewers will be using the same font that you have chosen, you can benefit from a font stack.
What is a font stack?
A font stack is a list of fallback fonts that you specify in your CSS. It starts with your top font preference for your purpose and ends with a catch-all fallback font that is likely to work everywhere. A number of you may be thinking "I do that already, I always specify a fallback font". In most cases, you're probably right. However, the concept of font stacking is much more than simply specifying a fallback font or two.
History Lesson
Before webfonts were widely accepted, developers and designers alike were forced to rely solely on web safe fonts for use in their web projects. It was important to choose the most widely accepted "safe" font and specify a fallback or two in case a small percentage of users happened to not have the preferred font face installed on their system.
Specifying those fallbacks for system fonts is where font stacking was born. At it's basest level it is a few fallback fonts in order of desired preference. At it's deepest roots, it is a means by which to leverage multiple font faces across devices and platforms to achieve a similar result regardless of the display medium. An example could be as simple as the "Arial stack"
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
to as in-depth as the "Impact stack"
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold",
Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold",
"Arial Black", sans serif;
In the end you have creative freedom to add as many, or as few fonts to your stack as you feel may be necessary to achieve your goals.
Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system.
- Nathan Ford
Creating Your Own Stack
Some development environments, dare I mention Dreamweaver or Visual Studio, offer pre-defined font stacks as you create your CSS. And for some, these are good enough and leveraged by default. However, for the most flexibility, you should always consider rolling your own font stacks. Even if you are reviewing those that are included as a defualt by your chosen IDE for flaws, you should always look for a way to make them your own.
Two of the most important things that you will need to know when creating your font stacks is:
- What is your preferred font?
- What is the generic font that you will specify as your lowest fallback?
Once you have these things determined it's easier to fill in the fonts in-between. An important thing to note is that not all font faces are created equally. That is to say, that just because a font face is in the sans-serif family and is commonly used in default font stacks - doesn't mean that it's correct. For instance, a common font stack that I used when first learning development was arial, verdana, sans-serif. On the surface, pretty innocent. On a closer inspection, you may note that the fonts (arial and verdana) are actually not as similar as you once thought.
font-family: arial, sans-serif;
font-size: 32px;
Sample sentence example.
font-family: verdana, sans-serif;
font-size: 32px;
Sample sentence example.
As you can see by the examples above, Verdana is not actually the same as Arial. Verdana is a relatively wide font, while Arial is technically rather narrow. A better fit for a font stack for Arial would be Helvetica as shown in the code snippet above for the "Arial stack".
For more examples of basic font stacks based on narrow/wide serif and narrow/wide sans-serif, check out The myth of web-safe fonts by Stephen Morley.
Categorizing Your Fonts
Common categories for fonts have always been serif and sans-serif. The most common additional category is referred to as monospace. Beyond these categories, there are further distinctions that allow for additional categories such as: cursive/script and decorative/fantasy fonts. Many designers have long confined themselves to the former (serif, sans-serif and monospace). However, with advancements in web technology and the wider acceptance of the @font-face declaration, designers can better express themselves through more creative typographical decisions.
Improving Design Through Typography
The idea behind font stacks is simple: provide a wide variety of font options for all platforms. For designers who understand typography it may feel like their creativity is being limited due to "web safe" fonts. By introducing font stacks, in conjunction with @font-face, a designer can drastically increase their design options.
External Resources:
