Web Safe Fonts

How to choose fonts that work best for your websites

Text displayed in a book
Understanding how to markup text with paragraphs and line breaks.

For many years, web designers were restricted in the number of fonts that they could use if they wanted those fonts to reliably appear on the websites that they were creating. These fonts that were found on most computers were known as “web safe fonts”. 

Web typography has come a long way over the past few years, and web designers and developers are no longer limited to only using those web safe fonts.

The rise of web fonts and the ability to link directly to font files has opened up a whole new world of possibilities for website font usage. Still, web safe fonts that are reliably found on all computers still have an important place in modern web design.

Linking to external fonts, which are either included along with the rest of your site's assets or which can be linked to using a 3rd party font service, gives you almost limitless font choices, but that benefit comes at a price. Those fonts need to load on a site, which will have a performance impact on a web page's loading time. This is where web safe fonts can be a benefit! Since those font files are loaded directly from the visitor's computer, there is no performance hit when the website loads. This is why many web designer's now use a mixture of web fonts that need to be downloaded along with those tried and true web safe fonts.

Sans Serif Web Safe Fonts

This family of fonts is one of your best bets for web safe fonts.

If you include these in your font stacks, almost all people will see the page correctly. Some common sans-serif web safe fonts are:

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

Some other sans-serif choices that will give you good overall coverage, but might by missing from some computers, are below. Just remember that if you uses these, you have to also include a more common one as a backup from the list above in your font stack.

  • Century Gothic
  • Geneva
  • Lucida
  • Lucida Sans
  • Lucida Grande

Serif Web Safe Fonts

In addition to sans-serif fonts, the serif font family is another popular choice for websites. Here are some of your safest bets for you to use if you want a serif font:

  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman

Once again, the list below are fonts that will be on many computers, but which have less overall coverage as the list above. You can use these fonts pretty reliably, but should include a more common serif font in your font stack as well.

  • MS Serif
  • New York
  • Palatino
  • Palatino Linotype

Monospace Fonts

While not as widely used as serif and sans-serif fonts, monospace fonts are also an option. These fonts, which feature letters that are all equally spaced apart, do not have as wide acceptance across platforms. If you want to use a monospace font, these are your best bets:

  • Courier
  • Courier New

These fonts also have some coverage.

  • Lucida Console
  • Monaco

Cursive and Fantasy Fonts

Cursive and fantasy fonts are not are popular as serif or sans-serif, and the ornate nature of these fonts makes them inappropriate to use as body copy. These fonts are more often uses as headlines and titles where they are set in larger font sizes and only for short bursts of text.

There is only one cursive font that is available on Windows and Macintosh, but not on Linux: Comic Sans MS. There are no fantasy fonts that have good coverage across browsers and operating systems. This means that if you are using cursive of fantasy fonts on your website, you are probably using them as web fonts.

Smart Phones and Mobile Devices

If you are designing pages for mobile devices, web safe font choices are variable. For iPhone, iPod, and iPad devices, the common fonts include:

  • Arial
  • Courier
  • Courier New
  • Georgia
  • Helvetica
  • Palatino
  • Times New Roman
  • Trebuchet MS
  • Verdana

Original article by Jennifer Krynin. Edited by Jeremy Girard on 11/9/16