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 ).
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.
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.
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.
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 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:
|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 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:
|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 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:
|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 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:
|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 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:
|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|
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.
OK. I know I've presented a lot of information. And it might seem overwhelming, but here's the low down:
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