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, readability
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:
Availability: 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.
Readability 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 version 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 snippet 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>.