Does the term "typography" scare and confuse you? When someone mentions kerning, do you feel a rush of panic? Fear not gentle reader! When you're done reading this article, you'll have a better understanding of how to use fonts on the web, a mixture of do's and don'ts, recommendations on how to use fonts on your web site, and a look at where fonts on the web are going.

What is a font exactly?

Let's start with the basics - a font is a computer file that tells your operating system how to draw characters on the screen. Every OS has a standard set of fonts used to create the text you see on the screen in dialogue boxes, loading screens, etc.The most common form of font you'll encounter is called a True Type Font (TTF) - this is a Windows-based file easily loaded via the control panel. You may see other font types referenced on sites, such as a Type 1 or Postscript font, but TTF is currently the most common and will be the focus of this article. Some companies, like Microsoft, have even developed TTF fonts specifically designed for on-screen display. These fonts are designed for maximum readability on monitors and LCD screens. These TrueType Core Web Fonts can be downloaded for free from Microsoft. And let's not forget about ClearType, another leap forward in the font/readability world - in a few years digital books will be a reality as they become easier and easier on the eyes to read. LCD and font technology is the driving force behind this movement.

Where are fonts on the web going?

A new type of font system, called OpenType, is starting to emerge - created by none other than Adobe and Microsoft. Announced way back in 1996, the standard has yet to catch on, but is gaining ground recently. In fact, if you're running the Windows 2000 release candidate 2, you just might see a new type of icon in your fonts folder. DELL has confirmed the inclusion of OpenType technology on their web site, so it's certainly on it's way!

What is OpenType exactly? It's a unified font format that merges TrueType and Type 1 fonts together - ending the font wars once and for all. To the end user (you and I) there's no real visible difference in the way we use fonts. We install them, and they work. However, there have always been issues around supporting Type 1 fonts - some software simply doesn't support the format. For certain graphics/layout professionals, Type 1 fonts are critical to their work. This new format will benefit everyone involved, because software developers will only have to support one type of font - OpenType.

One of the disadvantages of using custom fonts in your web design work is that that the user probably won't be able to see your design the way you intended (more on this below) - OpenType aims to solve this issue by allowing a custom font to be downloaded as part of your web page, and instantly installed, showing the user your design as you intended.The OpenType FAQ contains a great deal of information on this new format, and you can get started by downloading their Web Embedding Fonts Tool (WEFT) tool.    

Like all things in the technology world, there is more than one standard vying for the crown - Bitstream has given us TrueDoc. Font guru Daniel Will-Harris praises TrueDoc in his article, and I admit it looks interesting. When you go to his article, a tiny ActiveX window pops up and asks if you want to install the control. When you say yes, it installs the font and instantly you see the web page in the font he chose. Seems like a great technology, but the ironic part is that the font he chose actually decreased the readability - it made it far worse in my opinion. However, TrueDoc shows promise - the WebFont Player is already bundled in Netscape Communicator, and it's delivered to IE users via ActiveX. The downside is that if you want to create dynamic versions of fonts that you already have (for inclusion in your web site) you have to cough up $198.95 for the WebFont Maker. This completely kills the experience for some people. They find it too expensive to catch on.

A popular font-creation program is Macromedia's Fontographer - it's an expensive tool ($349 US), but if you want to get into creating high-end fonts, this is the tool of choice to use. It essentially takes the shapes you define, either by using scanned images or drawn images, and allows you to string them together into a single font file. You can also check out this step-by-step guide to creating fonts with Fontographer. And if you don't think font creation is a serious business, check out this contest that Macromedia sponsored - you can buy the winning fonts from GarageFonts.

If you are feeling up to it, there is an incredibly detailed and comprehensive examination of fonts and typography available on the WebReference web site written by design guru Dmitry Kirsanov' - one look at his designs and you know this guy knows his stuff.

Using fonts on your web site

Now that you understand more about fonts, let's get down to the meat of this article - using fonts on your web site. There are entire web sites devoted to this topic, but I'll try to give you enough pointers to implement fonts in an effective manner on your own web site. Here we go!

The first thing to understand about using fonts on your web site is that, yes, they do make a difference in the way your information is communicated. Fonts, like all visual elements of design, communicate emotion. Just like the color red might trigger feelings of passion or anger in your viewers, a technical font gives the feeling of precision and focus.

Even the font used in this article communicates something - it's a sans serif font, which looks "technical" compared to the traditional and default font of Times New Roman. Not sure what serif and sans-serif mean? Take a look at the images below - the serif is the little line that leads off the character, giving it a "flow" and guiding the eye to the next character. Serif fonts are said to be easier to read in long stints, because the serifs guide the eyes easier from character to character, but I have become so accustomed to reading sans-serif fonts I don't notice that effect.

Fonts really can change the whole effectiveness of your information. Don't believe me? Look at the two images below, identical except for the font used in the text, and decide which one communications the "personal" message more: