Css Tutorial : Web-Safe Fonts

Always, always think about clarity and legibility here. Choose fonts that look good not only on
your chosen platform (most look fabulous on a Mac), but also on others. How legible is your
11-pixel Times text over on a colleague’s PC? What if that colleague has/hasn’t enabled
ClearType font smoothing? What if you need to render some information in italics? Does your
chosen font cope well in such circumstances? Certain fonts give very consistent results in a variety of situations. While some may consider
the likes of Verdana and Georgia as safe bets, this is unfair. Legibility generally overrules whimsy,
and certainly comes well before indulgence. Verdana, for example, is vilified in some circles as
the equivalent of a Queen Greatest Hits album—absolutely everywhere, incredibly familiar, but
not delivering anything new, i.e., boring. Take this raw source though, and give it a little remix,
and who knows what could be drawn from it? My point is that the possibilities with CSS are
endless, and the combination of background images, appropriate font properties, and careful
spacing can give an old font new room in which to shine.
There are, in all facets of web design, rules to be followed. Web standards exist for the
common good, but most rules can be treated as guidelines for good practice. Remember that
nobody is forcing you to do things their way, and the web is an open playing field. Use the font
you want to use, and do not be swayed by ill-considered opinion. Just make sure your visitors
can actually read it.
Let’s look at the web-safe fonts available at the time of writing, illustrated in Figure 4-3,
and consider why some might be more useful than others, and what kind of web sites they
might suit.

Verdana
Verdana is super-legible, and copes with smaller font sizes very well indeed. It is devoid of
extraneous curly bits (technically speaking this means it is a sans serif font—that is, without
serifs), and I’ll bet my laptop that 99.9% of web users will have it installed on their machine,
especially as it comes bundled with Internet Explorer. Use Verdana for a government or blue
chip business web site.

Georgia
Georgia is a serif typeface (so it does have curly bits). It is a web designer’s favorite because
unlike most serif fonts, Georgia has been designed especially for the screen. Its italics, which
are unusually clear and legible on screen, are a major bonus. Use Georgia for a historical information
site, such as a web site about World War II.

Times New Roman
If a font has Times in the name, you can assume it will give the impression of a newspaper typeface,
although this is not always a good thing on screen. Another serif font, Times New Roman is
intended for PC platforms, and is hinted especially for the screen. That said, many would argue
that Georgia supersedes it if you want a particularly legible serif font for your web site.

Times
Times is the Mac equivalent to Times New Roman, but is not designed specifically for screen.
However, Macs being Macs, it’ll still render pretty well on that platform. Use Times New Roman
or Times for a financial institution’s web site.

Arial
Like Verdana, Arial is another sans serif font that lends a more modern feel to web sites. It is
widely used, but doesn’t work very well at lower font sizes, and there isn’t much default space
between the characters. Use Arial for a pretentious museum’s web site.

Helvetica
The closest web font to Arial for the Mac, Helvetica is another sans serif font regarded as a
superstar typeface in the real world, but faring not so well on screen. Use Helvetica for a new
media company’s web site.

Tahoma
With so little choice for web designers, you’d think there would at least be some variety on the
menu, but sadly there isn’t. Tahoma resides on any computer that has Microsoft Office installed
on it, and is thus available to most of your visitors, but it bears an uncanny resemblance to
Verdana, and is therefore used rarely. Use Tahoma for a business web site, or alternatively just
use Verdana.

Comic Sans MS
You want variety? Well, this is pretty wild. I say wild, but really Comic Sans is a bit of a joke. It’s
rare that you’ll come across a design that demands its text be rendered in this very informal
typeface. It is unfortunate that any web sites using Comic Sans tend to have that “my first web
site” feel about them, and it is best reserved for unfunny jokes or printable party invitations.
Use it if you wish, but steer clear if you are looking to present even a tiny amount of professionalism.
Use Comic Sans for your little sister’s web site about ponies.

Trebuchet
A great screen font, designed originally at a smaller size than most fonts, which usually means
a font that has less unique subtleties. That said, Trebuchet manages to convey a contemporary
feel in a limited space, and is a stylish choice that ships with copies of Internet Explorer. Use
Trebuchet for your personal portfolio.

Courier
Courier is a monospaced font, meaning every character is the same width as you would find on
a traditional typewriter, so they line up vertically as well as horizontally. Courier New is the
most common monospaced font but can appear faint when anti-aliased at smaller sizes. Alternatives
are Lucida Console (Windows), American Typewriter (Mac), and Monaco (Mac). Use
Courier or its alternatives to display code or simulate typewriter text.