Safe typefaces

See more about:

The CSS font-family property changes the typeface. For example:

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

Recall that different computers have different typefaces installed. Arial is a standard Windows typeface. But what if the user has a Linux machine? There’s a good chance that it won’t have Arial.

In that case, the browser goes down the list, and chooses the first typeface that is installed on the machine. So, the browser will look for Arial first. If that isn’t on the computer, the browser will look for Helvetica. This is a standard Mac typeface. If the browser can’t find that either, it will look for sans-serif. This isn’t an actual typeface, but instead tells the browser “use the system’s default sans serif typeface, whatever it is.”

If a typeface name contains spaces, you need to put quotes around it, like this:

font-family: "Trebuchet MS", Helvetica, sans-serif;

A “safe typeface” is one that’s likely to be available on most computers. These typefaces are available on almost all PCs and Macs:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Times New Roman
  • Trebuchet MS
  • Verdana

Most Unix systems have Arial, Courier New, and Times New Roman.

When you specify typefaces, always add one of the generic values (like “serif” or “sans-serif”) at the end of the list. This ensures that all site visitors see something at least approximately right.

You can use other typefaces by making a graphic. For example, here are some unusual typefaces that are on my PC, but may not be on your computer:

Unusual typefaces

I created a text block in OpenOffice Draw. This is desktop software, so it has access to all the fonts on my PC. Then I took a screenshot.


How to...