Redalto Communications Support Site

Question: Web Safe Fonts in Website Design

This question relates to category Web Design

Answer:

Are your website fonts showing correctly in web browsers?

A question we sometimes get from our website development clients is "why is the font we used in our graphic design not displaying correctly on my website?".

The question is best answered by understanding how fonts are displayed on your computer. In desktop publishing and graphic design software (eg, PDF, PSD file types), you are able to view any font of any style no matter how fancy or plain, because the font will have been embedded within the graphic file*.

However, HTML (websites) do not have the facility 'embed' fonts (not without breach of copyright laws anyway). Websites rely purely on your computer having the font installed locally to ensure proper presentation of a correct font on your website.

What does this mean for website design? Simply speaking, you need to design your website with your audience in mind. That is, understand what the most popularly used fonts are (on both Mac and PC platforms). And design your website to use those fonts. Use a combination of substitutable fonts that 95%+ of people are using (also known as "web safe fonts") and where you really need to use a unique font (generally only corporate logos or advertising banners have specific font requirements) substitute images for fonts.

What are the most used fonts? The most recent stats we have are as follows makes these fonts the best candidates as "web safe fonts":

 FONT

PC

MAC

 Verdana

99.61%

97.13%

Web Safe

 Arial

99.22%

97.41%

 Georgia

98.68%

94.83%

 Trebuchet MS

99.27%

94.54%

 Times New Roman

99.07%

94.25%

 Courier New

99.56%

91.67%

Use with caution

 Arial Black

98.54%

93.97%

 Impact

98.83%

91.09%

 Arial Narrow

88.73%

89.94%

 Comic Sans MS

99.07%

89.94%

 Tahoma

99.71%

77.87%

(Source: codestyle.org (Mar 2010))

However, smarter design would use CSS style sheets to define primary font, with alternate fall back fonts, which would be substituted if any computer does not have a particular font. For full font use statistics, please visit www.codestyle.org.

In summary:

When designing your website, follow these simple rules:

  • Understand what the top web safe fonts are
  • Make sure when you design your website you use these web safe fonts, or combinations of these fonts in your style sheet that allow for desirable font substitution.
  • If you require the use of a specific font (not web safe) for any part of your website, create graphic images of that font and accept that search engine optimisation will be reduced as a result.

Please participate in the Font survey
To help improve font statistics please submit your font survey online at Codestyle.org . Select your operating platform, and the java applet will scan your computer automatically. Then simply click submit when done (you don't need to submit your details).

* What is font embedding
The ability to carry font definitions within a document or file so that it can be displayed correctly on a computer that does not have that font.

Print this Email

  • Author: Tim Vandergriend
  • Created on: 13 Sep 2010
  • Views: 1055
  • Last modified: 13 Sep 2010

Can’t Find the Answer You’re Looking For?

If you’ve searched our FAQ database and still can’t find the answer, please submit your question using the below form. We will contact you as soon as possible, and if necessary update the FAQ with the missing information.

Verification