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.

Take a look at any website, regardless of industry, company size, or other differentiating factors and one thing you are sure to see that they have in common is text content. The way that the text is displayed is the practice of typographic design and it is one of the most important aspects of a site's look and feel, as well as its success.

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”. You may have heard this term in the past from a web designer as they tried to explain to you why a certain font choice could not be used in your site's design.

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 handful of 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. As useful as it is to now have access to so many new font choices, those tried and true web safe fonts still have an important place in modern web design.

Linking to Web Fonts

In use fonts on your site that may not be on someone's computer, you need to link to a web font file and instruct your website to use that font file instead of looking on the visitors' computer.

Linking to these 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 does come at a price. External 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 still 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 designers now use a mixture of web fonts that need to be downloaded alongside those trusty web safe fonts. This can be the best of both worlds as you gain access to some new and exotic fonts while still being able to manage site performance and overall download impact.

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 list 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 (from the list above) 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 are one which feature letters that are all equally spaced apart. They do not have as wide acceptance across platforms, but 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. Stylistically  these fonts may look really great, but you need to weigh the look of the font against the readibility of any text you set using them.

There is only one cursive font that is available on Windows and Macintosh, but not on Linux. It is 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 and linking to the appropriate font file.

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

Web fonts are an excellent choice when considering multi-device design, since being able to load external fonts will give you a much more consistent look from device to device.  You can then temper those downloaded fonts with one or two web safe choices to get the look and performance your site needs to succeed.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/8/17

Was this page helpful?