Web-Safe Fonts for Your Site
by Mario Sanchez


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. 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, readibility and character: 

Arial*

Availability: Widely 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: Widely 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 

Avaliability: 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. 

Readibility 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 verion 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 snipets 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. 

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 it 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>.


================================================================
Mario Sanchez publishes The Internet Digest 
(http://www.theinternetdigest.net), a collection of web design 
and Internet marketing tips and resources to help you design a 
better website and market it more effectively.  
================================================================