The myth of web-safe fonts

Update (2012): Web fonts — fonts that are downloaded on demand for use in a particular web page — allow web authors to use any suitably licensed font in their pages. Unfortunately a significant number of people still use older versions of browsers that do not support web fonts, and so for the foreseeable future web authors will need to continue specifying alternative fallback fonts.

Original introduction: 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

Verdana is much criticised in certain circles, but the problem is not the typeface itself but its careless use. Verdana has a large x-height (the size of lowercase letters in comparison to uppercase letters) 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 (used when the visitor does not have Verdana available) unreadably small.

To avoid this problem, web authors should do two things. Firstly, they should specify fallback fonts with similar characteristics so that an appropriate substitute is used if possible. Secondly, they should ensure the text is readable even if rendered in typefaces with a small x-height, such as Times, that are used as the default on many computers.

The remainder of this article details the five key font family stacks - sets of fonts with similar characteristics where most computers are likely to have at least one available.

The wide sans-serif stack

Verdana (designed by Matthew Carter and Tom Rickner for Microsoft), and Geneva (designed by Kris Holmes and Susan Kare for Apple) both feature a large x-height, making them appear wider and taller than most sans-serif typefaces.


To use this font family stack, use the following CSS:

1
2
3
body{
  font-family:Verdana,Geneva,sans-serif;
}

The narrow sans-serif stack

Helvetica (designed by Edouard Hoffmann and Max Miedinger) and Arial (designed by Matthew Carter and Tom Rickner for Microsoft) are more traditional sans-serif typefaces, with a smaller x-height.


To use this font family stack, use the following CSS:

1
2
3
body{
  font-family:Helvetica,Arial,sans-serif;
}

The wide serif stack

Georgia (designed by Matthew Carter and Tom Rickner for Microsoft), Utopia (designed by Robert Slimbach for Adobe), and Charter (also designer by Matthew Carter, for Bitstream) feature a large x-height, making them appear wider and taller than most serif typefaces.



To use this font family stack, use the following CSS:

1
2
3
body{
  font-family:Georgia,Utopia,Charter,serif;
}

The narrow serif stack

Times New Roman (designed by Starling Burgess, Victor Lardent, and Stanley Morison for Monotype) and Times (designed by Stanley Morison and Walter Tracy for Linotype) are more traditional serif typefaces, with a smaller x-height.


To use this font family stack, use the following CSS:

1
2
3
body{
  font-family:'Times New Roman',Times,serif;
}

The monospace stack

Courier New (designed by Howard Kettler for Ascender) and Courier (designed by Howard Kettler for Linotype) are monospace typefaces, suitable for samples of computer programming code.


To use this font family stack, use the following CSS:

1
2
3
body{
  font-family:'Courier New',Courier,monospace;
}

Where now?

Found this useful? Share it:

Also in HTML and CSS: