User Downloaded Fonts

A couple of years ago, I went to a web site on which the author had "optimized" the site for the newly-released Verdana font. His opening-page request read like this:"Please download this zip file, unzip it, shut down your browser, install the font, then open your browser and come back here".

How many people would actually do that? How many people really CARE enough about seeing the right font? The reality is that few (if any) people will go through all those steps to see his page "properly". Artistic integrity goes out the window if your visitor has to jump through hoops to meet your requests. So, as you can imagine, I don't recommend asking your visitors to download and install a font. If (somehow) they do as you ask, the benefit is that your text appears instantly (no download time) in the font you designed it in. However, this is pretty much a pipe dream, so moving right along..

Embedded Fonts

After doing a lot of research on the issues surrounding embedding fonts, I'm left with one inescapable conclusion: it's not ready for prime-time. Allow me to explain...

The TrueDoc idea is interesting, and the coding required to embed fonts isn't very difficult. But you're limited to the handful of dynamic fonts that Bitstream has created for your use, and if you want to use other dynamic fonts, you need to create them yourself with their $200 tool. So we have an easy to use idea that is crippled because the company wants to make money off of it - hardly an "open source" effort. TrueDoc will die a slow death.

Next we have the OpenType technology from Microsoft. I tried using the Web Embedding Fonts Tool, and it's anything but simple. I could easily write an article just on how to use the tool. The syntax for embedding the fonts is fairly simple:

<!--
@font-face 
{
font-family: S1;
font-style: normal;
font-weight: normal;
src: url(SIG7.eot);
}

[I've cut the remainder of the code - this is just a partial example for one font]

It's essentially a specific sort of CSS coding, which makes things easier when compared to the TrueDoc proprietary HTML tags. Despite the somewhat complicated nature of the WEFT, the tool is free, the technology is based on CSS, and it's easier to implement. According to some, it's not a secure format because users could steal the fonts that they've downloaded from sites and use them permanently on their system.So, needless to say, the font-making community doesn't like it much...

So, for right now, I'd say embedding fonts isn't a practical or stable method of using custom typography on your web sites. Which leaves us with...

Graphical Text

It's no surprise that while "text as text" is the best solution, it's not a practical approach just yet if you want to use special fonts but still keep things simple for your users. So we're left with creating custom fonts using graphics. If that's what were going to do, we might as well do it well. I've seen entire sites with blocks of text done as graphics, but many webmasters pick the wrong format for the graphic. Let's look at the same graphic done up as a JPEG and as a GIF file:

FIGURE 5:A progressive JPEG file, grayscale, at 15% compression = 10k in size

FIGURE 6: A six-color GIF file, browser-safe palette, no dithering  = 4.5k in size

You have to keep the compression on the JPEG low because artifacts show up easily on solid-color blocks. As you can see, the GIF file is half the size of the JPEG file - clearly the superior choice for graphical text (less than half the size). So when you're doing graphical text, try to make it a GIF and squeeze the color depth down as low as possible without sacrificing the image quality.

The pros of this approach are 100% control over how your site displays content, and the assurance that whether or not the user is using the latest browser, a Mac or a PC, your content will display properly. You have complete artistic control!

The cons include the lack of control is gives the user who normally has their default font size cranked way up (if their visually impaired, etc.), the lack of clarity when printing, the lack of ability for the user to copy/paste your content into other documents, and the problems you might have getting ranked properly in the search engines. You can off-set this last disadvantage by having all your text appear in the ALT tag of the image so the search engine will read it, but the other disadvantages are unavoidable.

The reality is that no site should ever be designed with 100% graphical text. However, putting introductions or headlines in graphical format to set the theme and mood is certainly permissible. For the rest of the body content, pick an appropriate but "safe" font to use.

Safe fonts to use on your site include Times New Roman, Arial, Tahoma, Verdana, Comic Sans, Courier New, and Garamond. Microsoft has a web page that shows you which fonts are bundled with which Microsoft product. And when you consider how many of the world's 'net users are browsing with a Microsoft operating system, browser, or Office Suite installed on their computer, you have a good idea about which fonts to use.

Tap Your Heels Together Three Times...

We're still very much in the Land of Oz when it comes to web fonts - flying monkeys wave around different banners for standards, and no one seems to really have a firm handle on how to handle it (and which witch to drop the building on). My personal bet is that, as the Microsoft browser continues to gain market share, we'll see better tools evolve to take advantage of that browser. Better yet, we'll see font embedding tools included in web design tools like FrontPage and Dreamweaver - the web designer will simply pick the font off his computer he wants to use on the page, and the web design tool will upload the fonts to the server for temporary user viewing. Someday...