Web Safe Fonts

Ryan Dube
Adding Custom Fonts to a Web Page
Adding Custom Fonts

Amateur web designers typically start out using the old HTML "font" tag to define the font face for specific blocks of text; however, professional web designers soon recognize the value of adding web safe fonts to their programming repertoire.

Web Page Fonts

Correct font display on a web page is sometimes a tricky thing to accomplish. When you consider how many people could potentially visit your website, and the various platforms that those visitors are using, the scope of the problem becomes much more apparent. The different types of devices, such as Windows, Mac or Linux, can significantly impact how your web page is displayed.

Each operating system, such as Windows XP or Windows Vista, handles fonts differently. For this reason, it's important to avoid using fonts that are too exotic or make use of web embedded fonts. This provides developers with a way to use more eccentric fonts, but the drawback is that not all operating systems will correctly interpret them.

Coding Web Page Fonts

The method of defining font in a web page has also changed. Traditionally, web designers used the simple HTML "font" tag to tell the browser which font to use to display the web page text:

<font face="verdana" color="green">This line is green and verdana font.</font>

Web designers used this approach for years, until the advent of newer website formatting technologies and standards made it much easier to format multiple web pages from a single formatting file. Website developers can now utilize CSS files to format elements such as font types, sizes and other style parameters within their web pages. For example, to define the font of a certain header size, the designer uses the following syntax:

h5 { font-family: serif; }

Using a "font-family" within a CSS file is now the accepted method to define the font in your web page. However, even when fonts are programmed correctly, the problem of ensuring that your website's fonts work on all systems still remains.

Choosing Web Safe Fonts

Web designers who want to ensure that a web page performs well on all platforms must take font into careful consideration. Web safe fonts are debatable; if you search the blogosphere to find out which fonts are "safer" than others, you'll find a wide variety of opinions. This variance depends on the probability that people will have certain fonts installed on their system.

Everyone knows which fonts come standard with each operating system, but the software that people choose to install, which typically increases font capabilities, is a guessing game. Still, some fonts are highly likely to be present on all systems.

Safest Web Fonts

Taking into account several font surveys on the Internet, the following fonts consistently make the list of the top 10 "safest" fonts to use:

  1. Verdana
  2. Arial
  3. Arial Black
  4. Comic Sans MS
  5. Courier New
  6. Georgia
  7. Times New Roman
  8. Trebuchet MS
  9. Century Gothic
  10. Impact

Using one of these fonts greatly improves your chances that your web page will be displayed properly regardless of the operating system.

Making Safe Fonts Even Safer

It's important to note that although the top safest fonts (Verdana, Arial, and Arial Black) are used by more than 90 percent of PC and Mac computer users, barely 60 percent of Linux users have these fonts installed. This makes it unlikely that 100 percent of the people visiting your site will be able to view it. However, it is possible to close that gap by providing multiple fonts in your CSS "font family" with the following code:

h5 { font-family: Verdana, Geneva, sans-serif; }

Instead of providing the browser with a single font, and potentially creating an error if that font isn't installed, the "font family" provides a list of fonts for the browser to choose from. These go from first choice on the left to third choice on the right. For example, in the code above, the browser will display the H5 header with Verdana font if it's available, if not, it will revert to your second choice, Geneva. If your second choice isn't available, the browser will revert to the generic font "sans-serif". Using this approach almost guarantees that your visitors will never experience problems viewing your website font, regardless of the system they are using.

If you have an opinion about the top ten safest web fonts listed above, please offer your input in the comments section below.

Web Safe Fonts