Web-Safe Fonts for Your Site

Choosing the right typeface for your website copy is important, since it will affect the way your readers perceive your page; serious and formal, or friendly and casual.  Aside from this, there are also important usability concerns. For example, some font types are more easily readable than others, and some are more widely available.

You want to choose font types that:

       1. are widely available across many browsers and operating systems,

       2. are easy to read on a computer screen, and

       3. fit the character of your site.

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 are fonts that don't have serifs, "sans" being the French word for "without".

The most common serif font is probably Times New Roman while 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.

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

Trebuchet is another sans serif font and is similar to Arial but with more character.  This too can 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.  So  if you need to present snippets of sample HTML code in your web pages, this is the font to use.

In Conclusion:

From a usability perspective, the clear winner is Verdana.  If you're 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 stick with larger sizes.

The way you specify your desired font in HTML is by using the <font face> attribute. The best practice is to specify several fonts instead of just one, putting the easiest to read first.

For example, if you want to use serif fonts, your HTML code will look like this:

<font face=Georgia, Times New Roman, Serif>

That way, your visitor's browser will try to load Georgia first, but if it doesn't have it installed it will try the next one on the list, in this case Times New Roman. If it doesn't have that font either, which is highly unlikely, the browser will choose the third option, which we have specified as any other serif font.

For sans serif fonts, the code will look like this:

<font face=Verdana, Arial, Sans>.

You can freely reprint this article.  Just include the following resource statement at the end:

Jerry Higdon contributes to several Internet Digests at the Resource Center published by Envisiondustry.net.  You will find useful articles and resources on internet marketing, website design, website branding, search engine and website optimization (SEO), including article submission, social networking and backlinking.

Additional Information