Available Fonts

Arguably the most annoying problem designers face with regard to the Web is the poor choice of fonts available. This boils down to the fact that the only fonts that can be specified are the ones certain to be installed on every computer used to view the web site. For example, just because you have Sharktooth Italicized installed on your computer does not mean everyone else has. Specify it in your style sheet, and the text on your web site, as viewed on your computer, will be rendered with it, but very few other users will have such an obscure font installed and available to their browser. The more obscure the font you specify, the more likely it is that you will run into trouble.

Thus, it is important to think about web-safe fonts. These are few, but they can be used with confidence, as most of your visitors will have them installed.

Web-Safe Fonts

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/has not 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 below, 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 we will 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 will 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 does not work very well at lower font sizes, and there is not 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 is not. 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. But really Comic Sans is a bit of a joke. It is rare that you will 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.

Interesting Alternatives

It is time to act like the rebellious tutor who throws course books out of the window and encourages the group to "push the envelope." In truth though, many designers are simply pursuing unsung alternatives that can sensibly be added to the accepted list of available web fonts. The gamble here is lessened thanks to the ability to suggest backup fonts should the preferred one be unavailable. Learning CSS can be challenging enough without being forced to work within difficult confines, so we encourage you to flirt with some of the following fonts, be they classic or well established, or newcomers that have shown their true worth on screen.

We will look at the merits of each of the fonts displayed in Figure followed by suggested family names and generic names to ensure your design is not compromised when that font is unavailable.

Lucida Grande and Lucida Sans Unicode

Lucida Grande comes preinstalled on Mac OS X, and Lucida Sans Unicode comes with
Windows XP, the latter being a very close match to the former. These fonts are a brilliant Verdana alternative, being supremely legible and extremely refreshing to eyes tired of typical web fonts. Note that this author has used Lucida Grande on probably 60% of all the sites he has built!

Suggested declaration:

"Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif

Futura

Futura is a good contemporary-looking font, comes preinstalled on Mac OS X, and is included with many Adobe applications. It is a great sans serif font that works particularly well at larger font sizes (so great for headers).

Suggested declaration:

Futura, Helvetica, Arial, sans-serif

Helvetica Neue

A redrawn version of Helvetica that has better separation between characters across its various guises, Helvetica Neue (pronounced "noye-er") comes preinstalled with most platforms and software. It is a very stylish font that looks great in any situation.

Suggested declaration:

"Helvetica Neue", Helvetica, Arial, sans-serif

Gill Sans

Gill Sans is classified as a humanist sans serif, making it very legible and readable in text and display work. The condensed, bold, and display versions are excellent for packaging or posters, and this description translates very well to the screen. Gill Sans exudes a modern feel due to it is clear, generous, and original characters. It comes preinstalled on Mac OS X.

Suggested declaration:

"Gill Sans", "Lucida Grande", "Lucida Sans Unicode", Arial,
sans-serif

Palatino

Preinstalled on Mac OS X and many Windows machines, Palatino is a typeface based on classical Italian Renaissance forms, and is a rather nice serif font. It has become a modern classic in itself, and is popular among professional graphic designers and amateurs alike. Palatino works well for both text and display typography, and used carefully it can be a great web font.

Suggestion declaration:

Palatino, Georgia, "Times New Roman", serif

Be Careful with Fonts

Remember that the alternative fonts suggested here need to be used with caution. Ensure sensible alternatives are listed in the font-family sequence, and remember that a font displayed on a Mac can look significantly different, or even be unavailable, on a PC. It is advisable to edit your font sequences at the testing stage to see how your alternative fonts work for you. For example, Georgia may be your second-choice font, but be sure it suits your design should the first choice be unavailable.

[Back] [Contents] [Next]