What Fonts Should I Use?
When Aldona posted asking for help on the google group, one snippet of code surprised me: font-family: "High Tower Text", "Balloon", "Arial", "Harlow Solid Italic", "Times New Roman" ;. What surprised me was how, well, wrong that font-family was, while being entirely correct code. In this post I will cover how the font-family property works, good practice for its use and what fonts are good to use for the web.
The font-family Property
As we know, font-family is generally given a list of fonts, separated by commas. So far so good, Aldona’s example is spot on there. However, correct use is not necessarily good use. Forthwith, I shall demonstrate what could be improved.
-
All Fonts in a Family Should be Similar
Looking into the various fonts Aldona chose, I found them to be quite the mish-mash. The majority are formal looking serif fonts, but Balloon is a ‘handwriting’ font and Arial, of course, is a clean sans-serif font. They should be removed, leaving us with:
font-family: "High Tower Text", "Harlow Solid Italic", "Times New Roman" ;. -
Go From Less Common to More Common
A browser will always try to use the first font in the list, failing that it will try each of the remaining fonts in turn until it finds one it can display. As such, having the highly common Arial in the middle of the list is pointless, as the following fonts will almost never be used.
-
End the List with a Generic Font
What happens if the browser cannot find any of the fonts you list? Unless you have a generic font to finish the list it’ll use it’s default font, and god knows what that’ll be. Generic fonts tell the browser to find any font from a given category. The categories are serif, sans-serif, monospace, cursive and fantasy. CSS tips & tricks: Font Families, on the W3C site, explains what each of the generic fonts are. In Aldona’s case we have serif fonts, so it becomes:
font-family: "High Tower Text", "Harlow Solid Italic", "Times New Roman", serif ;. -
Use Web Safe Fonts
There are only a handful of fonts can be found on users computers with any surety, and neither High Tower Text or Harlow Solid Italic are amongst them. I had to do a google search just to find out what they look like!
The font Georgia is similar in style to those two, and is commonly found on Windows and Mac systems, and according to Web Space Works, on about half of Linux systems(although with such a small sample these results must be taken with a grain of salt. Generic fonts are still important). With this change the code becomes:
font-family: Georgia, "Times New Roman", serif ;and it will now reliably work on most systems.If one must use a special font, it is better to make a graphic out of it that to rely on a user having that font. Just don’t use pictures for body text!
Web Safe Fonts
There are only 9 fonts that are commonly considered ‘web safe’ They are Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS and Verdana. These fonts were at one point shipped with Internet Explorer, and have since been taken up by both major OSs.
Additionally, Helvetica, Courier and Times are common enough to be considered part of this category.
Web Space Works has a survey of ‘web safe’ support. Design Tutor has examples of the 9 web safe fonts and examples of how to use them.