Web Safe Fonts

A Tutorial

By George Jaros


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 graphics 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:

NameText ImageType
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:

NameText ImageType
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:

NameText ImageType
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:

NameText ImageType
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:

NameText ImageType
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:

Additional Resources

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

 


 

 

Pages by George Jaros
© 2004 George Jaros and Web 2 Market
October 22, 2004