Unfortunately, common web practices and/or technologies are not fully utilizing this functionality. There seems to be a lack of consideration for the process of creating these stacks. For example, Dreamweaver’s defaults look like so:
- Arial, Helvetica, sans-serif
- Courier New, Courier, moonscapes
- Times New Roman, Times, serif
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
As you can see, there are not a whole lot of options, and the substitutes are often not appropriate. This is an example of how lax typographic standards on the web are leading to poor design decision making. I am not going to speculate, here, as to whose fault it is that typography on the web leaves much to be desired… there are probably as many culprits as there are offenses. I will say, though, that font stack are ultimately design factors, and should be scrutinized as such.
Free Fonts family: Ideal, Alternative, Common, Generic;
- Ideal - Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
- Alternative - When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
- Common - At this point, you just need something similar that is not going to break your layout.
- Generic - Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.
- I did deliberately leave out some fonts, cough Comic Sans cough, because I do not particularly see the use in them, and I don’t believe that these examples will solve every typographic purpose, but hopefully it’s a start. Feel free to apply the above rules and create some stacks of your own.
- If you’re interested in a more comprehensive comparison, download the pdf [13.1 mb]. In it, you will find examples of titles and copy, set in the different font stacks.
- Now, font stacks help us open up a few more typographic options to create a more engaging online communication, but how do we choose which specific face to use? And which of these web safe fonts will work as a good compliment? More on that in my next post.