Generic Font Family As A Last Alternative

When you run your site through the W3 CSS Validator do you settle for Congratulations? Or do you want the complete No error or warning found - Congratulations? Is near enough good enough or would you rather get it right?

One very common warning that often remains after the Congratulations, if you scroll down a bit further, is the innocuous looking

Line : x font-family: You are encouraged to offer a generic family as a last alternative

So what is a generic font family and how do you fix this warning? The W3C Fonts specification tells you what the five generic fonts entail. These are serif, sans serif, cursive, fantasy and monospace. For example, Helvetica and Tahoma are sans serif fonts which don’t have those small flicks, and Garamond is a serif font which has the flicks. Serif fonts seem to work well for printing while sans serif fonts work better on the screen. The font specification is an interesting browse if you have the time.

So the fix for the warning? Well this one is so simple you’ll kick yourself if you haven’t already figured it out for yourself… Wherever you have a line in your CSS like

font-family: Tahoma, Arial, Helvetica;

you just need to add one of these generic font families as a last alternative, it’s a fallback… usually for the screen this would be sans-serif, the family without the flicks.

font-family: Tahoma, Arial, Helvetica, sans-serif;

As an aside I do remember reading on the Web Standards Group mail digest a few months ago that someone had once used just a generic font family on it’s own. This apparently failed on one platform, the truth is I couldn’t remember which, and those ugly squares were displayed as the default font on that system. So I guess what I’m saying is that you should work out a good fall back strategy in your choice of fonts for that list and finally put in your generic font as a backstop. And hopefully that validator will give you the more complete No error or warning found - Congratulations.

Comments are closed.