In Web Design

Web Safe Fonts

When designing a website, you need to keep in mind that printed material and screen are two different worlds. One of the factors that differs vastly is font type. On printed material you are not restricted in anyway and can use any type of font. On pc screens however, you are limited to a couple of web safe fonts. Why?

Because not all fonts are installed across all browsers (Safari, Opera, Chrome, Internet Explorer, Firefox etc) and not all fonts are installed across operating systems (Linux, Windows – all the various copies, Mac etc). Thus, if you use a Mac and decide to pick a Mac font, the font will revert to Times News Roman when the site is viewed on a pc.

Therefore, to ensure your site looks ok across the major browsers, we give you this list. Choose wisely :

You want to choose font types that:

  1. fit the character of your site,
  2. are easy to read on a computer screen, and
  3. are widely available across many browsers and operating systems.

There are basically two types of fonts: serif and sans serif.   Serif fonts are those that have fine cross-lines at the extremities of the letter. Sans serif (“sans” being the French word for “without”) are fonts that don’t have serifs. The most common serif font is probably Times New Roman. Arial is an example of a common sans serif font.

Let’s go briefly through the most popular font types and evaluate their availability, readability and character:

  • Arial*:

• Availability: Thoroughly available. It is probably the most common sans serif font. It is the default font for Windows, and it first shipped as a standard font with Windows 3.1.

• Readability On Screen: Not the worse but definitely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters too small.

• Character: Has a streamlined, modern look but is also plain and boring.
*For Mac users, the equivalent of Arial is Helvetica.

  • Times New Roman:

• Availability: Thoroughly available. It is probably the most common serif font. It is the default font for web browsers. It was first shipped as a standard font with Windows 3.1

• Readability On Screen: Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes.

•Character: Serious, formal and old fashioned.
*For Mac users, the equivalent of Times New Roman is Times.

  • Verdana:

• Availability: A widely available sans serif font, Verdana was first shipped with Internet Explorer version 3, when the exponential growth of the Internet demanded a new font that was easy to read on the screen.

• Readability On Screen: Exceptional. It’s wide body makes it the clearest font for on-screen reading, even at small sizes.

• Character: Modern, friendly and professional.

  • Georgia:

• Availability: Good. It is a serif font introduced by Microsoft with Internet Explorer version 4, when the need for a serif font with much better readability than Times New Roman became evident.

• Readability On Screen: Very good. It is the best serif font for on-line reading, since it was specifically designed for that purpose.

• Character: Modern, friendly and professional.

Microsoft has also popularized two more fonts: Comic Sans Serif and Trebuchet.

Comic Sans Serif was launched with Internet Explorer version 3 and mimics the hand writing used in comics. It is easy to read and is informal and friendly, but it is not considered appropriate for more serious, professional sites.

Trebuchet is another sans serif font, similar to Arial but with more character, although it can be difficult to read in small sizes.

Finally, we can mention Courier New, a serif font that was widely popular with old, mechanical typewriters, and that is now used only to present simulated computer code (if you need to present snippets of sample HTML code in your web pages, this is the font to use.)

Therefore, from a usability perspective, the clear winner is Verdana. If you are inclined to use a serif font, Georgia is the best option. Arial remains a good option for specific parts of text, like headlines and titles, where a different font must be used and you can use larger sizes.


Recent Posts