Font Stack (n) : A list of several fonts provided from a website to a browser via CSS from which the browser will chose a font with which to render the associated text. eg. font-family: Helvetica, Arial, sans-serif;
This is a pretty simple concept to understand. To show text on screen, the browser needs to use a font, and the way web developers tell the browser which font to use is by making a font stack like the one shown above. The browser will go through the list from left to right, and when it finds a font that it can use, it renders the text using that font. So you put the ideal font first, then the next-best-thing that looks pretty similar, then maybe another back-up or two, then a default like serif or sans serif, which essentially tells the browser to use whatever default font it has of that type.
I was sifting through WordPress themes the other day when I stumbled upon:
font-family: Georgia, sans-serif, Verdana;
Let’s take a moment to go over the various atrocities committed by this abomination:
- Georgia is a serif font, while Verdana (and obviously sans-serif) are sans-serif fonts. It’s purely nonsensical to include serif and sans-serif fonts in the same stack — you either want serifs or you don’t.
- Browsers choose fonts from left to right, remember? And sans-serif is one of those default fonts we talked about, so it’s guaranteed to always be supported by all browsers. This means that the Verdana in that stack will never be used, ever. There is absolutely no reason to include another font after a default.
- One of the notable characteristics of Verdana is that it’s very wide. The wider the font, the less characters will appear on a single line. It’s a terrible idea to include a wide font, such as Verdana, in the same stack as a comparatively thin font, such as Georgia (or Arial, which is a more common mistake) because now the width of your lines, the length of your page, and the general look and feel of your text vary greatly depending on which font is used.
Horrible! But all is not lost; here are a few simple guidelines to make sure you don’t create anything similar:
- Never mix serif and sans-serif fonts in the same stack.
- Always include a default font, but always put it at the very end.
- Always test each font first to make sure your lines break in about the same places and that your text still has the same general shape.
- Never guess — the internet is a wonderful place with plenty of resources for the aspiring typophile, use them!