Web Safe Fonts

What Are Fonts?

Even if you've never hear the term Font before, I'm sure you've seen different fonts all over. As defined by Webster's, a font is:

(Print.) A complete assortment of printing type of one size, including a due proportion of all the letters in the alphabet, large and small, points, accents, and whatever else is necessary for printing with that variety of types; a fount.

Already on this page you've seen two separate fonts ( a Sans-serif Font [probably Arial] and a Serif Font [probably Times New Roman] ) and several variations of each ( bold, italic, large ).

Why Use Fonts?

Fonts can be used to give printed material a uniform look and feel. There are thousands (and probably millions) of different fonts out there. They range in style from very clean and professional looking to fun and energetic to elegant and flowing. There are even fornts that don't represent alphabetical characters at all; they depict symbols or small pictures. Different languages have different font sets to represent all the characters needed. Some people have even designed fonts for fictitious languages, like Elven or Klingon.

In today's world of mass information and intense visual stimulation, fonts are a very important part of conveying information, emotions, and ideas. They type of font used on a brochure can say as much about the product or service as the actual text.

Take for example these two boxes for the Web 2 Market Quick Order Module for AbleCommerce. The first box is our actual box. The second image is the box with some goofy fonts for the name of the product. The first box conveys a much more professional feel. The second box makes us look like a bunch of goofs, an impression that isn't great for selling a business product.

Or how about these two graphic of a party invitation. Which one looks more fun? I'd go with the first one.

So What's This Have To Do With A Web Site?

You might be asking yourself that very question. And maybe you're thinking: "I have a whole bunch of fonts on my computer. I can make a really cool looking web page." Well, the answer is yes and no. It is possible to use all your fonts on your web site, but you're probably the only person who will be able to view it like you intend.

The problem arises because other people might not have the same fonts installed on tehir computer that you do. You might have a really cool looking font, like or . Unfortunately, not everyone has those fonts installed on their computer. So instead of seeing text in the Oreos Font, your visitor will see the page in whatever their browser's default font is. For example, This text should display as Poornut. If you have the Poornut Font installed on your computer, it looked like this: . If not, it displayed the same as the rest of the text on this page.

This can really wreak havoc on how your page appears. Text won't flow the same, graphics won't always line up cotrrectly, tables will be resized, and tons of other unpredictable nuances.

Well, then how can I use my cool fonts?

Another very good question. The only way to guarantee that a font is displayed in the exact way you want it to on everyone's computer is to make it a graphic. That's what I did for the Caeldera, Oreos and Poornut fonts above. They're not actually text, they're graphics, so I knew you could see them.

So what fonts are available for web sites?

Generally, there are three font styles available for use on web sites: Serif Fonts, Sans-Serif Fonts, and Monospace Fonts. These three styles will display pretty much the same on most people's computers.

Additionally, there are also Cursive Fonts and Fantasy Fonts, however these font styles aren't as standardized among different computers.

Serif Fonts
Serif Fonts are fonts that have serifs or little tails on the characters. Most browsers will display serif fonts as either Times New Roman (Win) or Times (Mac). Both look very similar. Some common serif fonts are:

Name	Text	Type
Book Antiqua	This is a sample of Book Antiqua	Win
Bookman Old Style	This is a sample of Bookman Old Style	Win (Bookman for Mac)
Calisto MT	This is a sample of Calisto MT	Win
Century Schoolbook	This is a sample of Century Schoolbook	Win (New Century Schoolbook for Mac)
Footlight MT Light	This is a sample of Footlight MT Light	Win
Garamond	This is a sample of Garamond	Win/Mac
Georgia	This is a sample of Georgia	Win/Mac
Times New Roman	This is a sample of Times New Roman	Win (Times for Mac)

Sans-Serif Fonts
Sans-Serif Fonts are fonts that don't have serifs on the characters. Most browsers will display sans-serif fonts as either Arial (Win) or Helvetica (Mac). Some will also display Verdana. All three fonts are very similar, but do have slight differences, more than the difference between TimesNew Roman and Times. Some common sans-serif fonts are:

Name	Text	Type
Arial	This is a sample of Arial	Win/Mac
Arial Black	This is a sample of Arial Black	Win/Mac
Arial Narrow	This is a sample of Arial Narrow	Win/Mac
Arial Rounded MT Bold	This is a sample of Arial Rounded MT Bold	Win/Mac
Avant Garde	This is a sample of Avant Garde	Mac
Century Gothic	This is a sample of Century Gothic	Win
Futura	This is a sample of Futura	Mac
Geneva	This is a sample of Geneva	Mac
Gill Sans MT	This is a sample of Gill Sans MT	Win (Gill Sans for Mac)
Helvetica	This is a sample of Helvetica	Win/Mac
Helvetica Narrow	This is a sample of Helvetica Narrow	Mac
Helvetica Neue	This is a sample of Helvetica Neue	Mac
Lucida Sans Unicode	This is a sample of Lucida Sans Unicode	Win
News Gothic MT	This is a sample of News Gothic MT	Win
Tahoma	This is a sample of Tahoma	Win
Trebuchet MS	This is a sample of Trebuchet MS	Win/Mac
Univers	This is a sample of Univers	Mac
Verdana	This is a sample of Verdana	Win/Mac

Monospace Fonts
Monospace Fonts are fonts that take up the same amount of space on a page despite the character. For example, the letter i takes up the same amount of room as the letter M. In Serif and Sans-Serif fonts, the letter i is much narrower that the M. Most browsers will display monospace fonts as either Courier New (Win) or Courier (Mac). Both of these fonts are very similar. Some common monospace fonts are:

Name	Text	Type
Andale Mono	This is a sample of Andale Mono	Win/Mac
Courier	This is a sample of Courier	Mac
Courier New	This is a sample of Courier New	Win/Mac
Lucida Console	This is a sample of Lucida Console	Win
OCR A Extended	This is a sample of OCR A Extended	Win
Terminal	This is a sample of Terminal	Win

Cursive Fonts
Cursive Fonts are flowing fonts that look hand written. Unfortunately, cursive fonts are much less standardized than the other types of fonts. However, most systems will display Comic Sans MS (Win and Mac) as the default cursive font. Some common cursive fonts are:

Name	Text	Type
Brush Script MT	This is a sample of Brush Script MT	Win/Mac
Comic Sans MS	This is a sample of Comic Sans MS	Win/Mac
Lucida Handwriting	This is a sample of Lucida Handwriting	Win
Zapf Chancery	This is a sample of Zapf Chancery	Mac

Fantasy Fonts
Fantasy Fonts are fancy or decorative fonts. Unfortunately, fantasy fonts are much less standardized than the other types of fonts. However, most systems will display Impact (Win and Mac) as the default fantasy font. Some common fantasy fonts are:

Name	Text	Type
Copperplate Gothic Bold	This is a sample of Copperplate Gothic Bold	Win (Copperplate on Mac)
Haettenschweiler	This is a sample of Haettenschweiler	Win
Impact	This is a sample of Impact	Win/Mac
Playbill	This is a sample of Playbill	Win

So what fonts do I choose?

Another tough question. Typically you should choose the style that you want to use for your web page and then choose a font from that style. The way the coding for web site fonts works is hierarchical. You select your fonts with code like this: style="font-family:Helvetica, Verdana, Arial, sans-serif;". The browser will look for the fonts installed on the viewer's system in the order that they are entered. So in this case the browser would look for Helvetica. If it wasn't installed, it would revert to Verdana. If it couldn't find Verdana, it would revert to Arial and finally, in the unlikely event that none of these fonts were found, the default sans-serif font for the system.

Most of the fonts listed above are pretty safe to use. They'll cover probably 75-90% of all systems. For Serif Fonts, Times New Roman and Times will cover about 99.99% of all systems. For Sans-Serif Fonts, Arial, Helvetica and Verdana will cover about 99.99% of all systems. For Monospace Fonts, Courier New and Courier will cover about 99.99% of all systems. So those are your best bets. They'll even cover systems running uncommon operating systems, like Unix or Linux.

But remember. If you want to use a very different font, or want to use one of the less common fonts listed above, but want to be 100% sure that things will display the way you want, you'll have to use graphics.

Final quick summary...

OK. I know I've presented a lot of information. And it might seem overwhelming, but here's the low down:

There are three main font styles available:
There are two uncommon font styles available:
The most common fonts used are:
Other common (but not quite so much) fonts are listed above.
If you want to use something else, make it a graphic.

Additional Resources

Here are a few more resources on choosing fonts for your web pages.

Web Fonts

Font Readability

General Font Information

Graphic Design - Text Layout

Default Font Sets

A Tutorial

By George Jaros