Are your website fonts showing correctly in your web browsers?
A question we sometimes get from our website development clients is why the font used in graphic design is not displaying correctly on the 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 would have been embedded within the graphic file. (Font embedding is 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.)
However, HTML (websites) cannot embed fonts without breach of copyright laws. 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 actually do need to use a unique font, (generally only corporate logos or advertising banners have specific font requirements) substitute images for fonts.
The most recent stats we have indicate that these fonts are the most popular and are therefore 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, it would be smarter design to use CSS style sheets to define primary fonts 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:
- Know the top web safe fonts.
- Make sure that 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).
