The pervasive myth of ‘web-safe’ fonts asserts the existence of a small set of font families that are present on almost all computers. A belief in this myth has led to the widespread adoption by web authors of typefaces such as Verdana, without the precautions necessary to ensure that content remains readable for visitors who don’t possess these fonts. Fortunately Cascading Stylesheets (CSS) provide a solution, allowing authors to specify ‘font family stacks’ to increase the likelihood of a satisfactory appearance.
The trouble with Verdana (and Arial, and…)
Verdana is much criticised, but with the proper precautions it can be used without jeopardising readability for those without it — the problem is not Verdana itself, but its careless use. In general, specifying only a single font — usually through the ancient font element but occasionally through CSS — may cause problems for visitors lacking that font, as their browsers will use their default fonts, which are usually traditional serif fonts such as Times.
CSS defines five generic font families — ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, and ‘monospace’ — which can be used to suggest to the visitor’s browser the preferred style of typeface to use if none of those specified are available:
body{
font-family:Verdana,sans-serif;
}This technique provides a partial solution, but it should be extended further to increase the chance of a suitable alternative typeface being chosen.
The five key ‘font family stacks’
Typefaces differ in many respects, but the most significant variable effecting readability is the ‘aspect ratio’ — the ratio of the height of minuscules (lowercase letters) to the overall height. Typefaces such as Verdana have large aspect ratio to aid readability, but this has the effect of making the characters look larger than those of other typefaces at the same point size. Web authors usually compensate for this discrepancy by reducing the point size, but this can make substitute typefaces unreadable.
To avoid this problem, web authors should ensure their content is readable when sans serif typefaces such as Arial, Helvetica, or Tahoma — common default sans serif typefaces — instead of their preferred choices. In addition, authors can use CSS to specify alternative fonts of a similar aspect ratio to increase the probability of characters appearing to be the size the authors intended. These sets of alternative fonts are known as ‘font family stacks’, and the five key stacks are listed below.
The ‘wide’ sans serif stack
Verdana was designed by Matthew Carter and Tom Rickner for Microsoft. Geneva was designed by Kris Holmes and Susan Kare for Apple. Both typefaces have a large aspect ratio, leading to their characters appearing wide in comparison to most typefaces. The first font family stack includes these two typefaces, before the generic family ‘sans-serif’:
body{
font-family:Verdana,Geneva,sans-serif;
}The ‘narrow’ sans serif stack
Tahoma was designed by Matthew Carter and Tom Rickner for Microsoft. Arial was designed by Robin Nicholas and Patricia Saunders for Monotype. Helvetica was designed by Edouard Hoffmann and Max Miedinger. All three are normal sans serif typefaces, although Tahoma has a slightly larger aspect ratio for which narrower character spacing compensates. The second font family stack includes these three typefaces, before the generic family ‘sans-serif’:
body{
font-family:Tahoma,Arial,Helvetica,sans-serif;
}The ‘wide’ serif stack
Georgia was designed by Matthew Carter and Tom Rickner for Microsoft. Utopia was designed by Robert Slimbach for Adobe. Palatino — also known as Palatino Linotype — was designed by Hermann Zapf for Linotype. All three typefaces have a large aspect ratio, leading to their characters appearing wide in comparison to most typefaces. The third font family stack includes these three typefaces, before the generic family ‘serif’:
body{
font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;
}The ‘narrow’ serif stack
Times New Roman was designed by Starling Burgess, Victor Lardent, and Stanley Morison for Monotype. Times was designed by Stanley Morison and Walter Tracy for Linotype. Both are normal serif typefaces, and they are almost identical in appearance. The fourth font family stack includes these two typefaces, before the generic family ‘serif’:
body{
font-family:'Times New Roman',Times,serif;
}The monospace stack
Courier New was designed by Howard Kettler for Ascender. Courier was designed by Howard Kettler for Linotype. Both are monospace typefaces, suitable for samples of computer programming code. The fifth font family stack includes these two typefaces, before the generic family ‘monospace’:
body{
font-family:'Courier New','Courier',monospace;
}