Web-Safe Fonts for Your Site

Web-Safe Fonts for Your Site


Choosing the right typefacefor 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: 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 definetely 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:

• Avaliability: Good. It is a serif font introduced by Microsoft with Internet Explorer
  version 4, when the need for a serif font which 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>.


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

Mario Sanchez publishes The Internet Digest ( http://www.theinternetdigest.net
), an internet marketing content site packed with useful articles and resources,
and Shoestring Branding ( http://www.shoestringbranding.com
) where you can learn the basics of search engine optimization in four easy steps



http://www.theinternetdigest.net/archive/websafefonts.html