Selecting Fonts for the Web

Keys to Consider

SAMPLE OF BASTARDA:
The quick brown fox jumps over the lazy dog.

Don't see it? You can download Bastarda for Windows (shareware) from Fontessa if you'd like; it's a well-executed cursive face that you might find useful for DTP. But you still won't see it on this page, even though the HTML is set for it, unless you're using AOLPress (v. 2.0). Although Bastarda shows up fine with this editor, it doesn't display in Netscape or Explorer.


Functionality
There are, unfortunately, many fonts that simply don't function for the Web due to some technical incompatibility. Our browsers just don't recognize them even when the same font works wonderfully in word processors or art programs. Or a font might work in one browser, but not in another. Sometimes, it's just a matter of getting the right name in the tag (see Tech & Troubleshooting), but it's not always that simple. Before using a new font extensively, you'll get a better picture of how it's displaying by previewing your chosen font on a test page from the 3.0+ versions of both Netscape Navigator and Microsoft Explorer. If it doesn't display properly and within a reasonable size on those two, it's just silly to add it to your page, no matter how great a face it might be, unless you've got an awesome alternate ready for the majority of your visitors.

Once you have found a font that functions for the Web, you must also check to see if all characters are available. Because your main fonts will most likely be freeware, you need to be aware that many "free" fonts are incomplete in some manner. A freeware font may only contain caps, for instance, or only lowercase. Numbers are frequently omitted, as is punctuation you'll be needing like a period, comma, colon, apostrophe, quotations, ampersand, etc. Some "free sample" fonts have absent alphabetic characters. In some cases, you may be able to work around the omissions, depending on the font and the usage you plan for it, but for a main text font, you'll be wanting a full "palette" to draw upon.


Availability
Availability is the next major key to keep in mind. The more likely it is that your readers already have the font, the better a choice it is. The font needs to be being distributed well enough that your readers either already have it installed or can access it easily, preferably from a direct download link at the start of your page. For the latter reason, it's also best if the font is freeware rather than shareware/commercial. Unless you've got something really exceptional, your visitors aren't generally going to feel eager about needing to lay out cash just to view your site the way you intended it to be seen. If it's a truly great font that you absolutely must use, go for it anyway and let folks know where they can get it and how much it'll cost, but provide alternate (preferably more familiar) free faces in your font tags.

"Shareware" and "commercial" essentially mean the same thing: the item has a price tag. For the purposes of this page, I'm defining shareware fonts as commercial faces you can download immediately and pay for later, and commercial as those that require payment up front.

Because of the obligation and delay involved, I wouldn't recommend building a page designed for a commercial font, but it is helpful to be aware of some popular faces your viewers may already have installed that could be used as alternates in your tags (such as Lucida Casual). Shareware can be downloaded immediately, but requires an investment for any extended use, which may cause some people to pass on the download. I've personally bought a large number of commercial fonts and support shareware too, so I'm not opposed to commercial products, but freeware works out best for Web use since it incurs no monetary obligation.

Legality
Take caution regarding the differences between "free offers" (such as what Letraset often makes available; they can give it away -- you can't), "freely distributed" (which may or may not mean you're free to redistribute), "public domain" (of which no font exists, unless the creator has deliberately and explicitly placed it there), "shareware" (which usually has a price tag and requires registration), "linkware" (which is shareware requiring payment in the form of a hyperlink), "trialware" (which may be an interchangeable term with shareware), "demoware" (usually a free but crippled demonstration version) and well, any-ware -- you get the idea.

If you don't know what the terms mean, then  be-a-ware. Preferably, get the definition straight from the creator and/or owner of the copyright. None of the "trendy-ware" nicknames have any standard legal meaning and they are often interpreted in differing ways. Find out what is really meant before you set yourself up as a distributor of that cool font that was listed as "free" on Joe-Somebody's page, but is actually owned by Angree Atyue Foundry International. A little research at the beginning can save you a lot of potential trouble down the road.

Remember that you never own a font unless you've created it from scratch yourself. What you pay for (or obtain freely) is a license to use that font, and an owner can offer many licenses for differing kinds of use. At the very least, the more sure you can be of the use-rights you're permitted, the less likely it will be that you'll need to redesign your custom page next week from the ground up with some other face.


Compatibility and Accessibility
While you're working on availability, don't forget that not all your visitors are using the same equipment. Having the choices narrowed down to TrueType format is a help, but we've got webfolks using Windows 3.1, 95, 98, NT, GeoWorks, O/S2, Macintosh, PowerMac, DOS, Unix, Linux, Amiga and many, many others. Is your chosen font ready to install and function on all these systems? At the very least, try to have both a Win and Mac version ready. 

Are you providing a simple and convenient path by which people can reach your chosen font? I break this last guideline myself by sending my visitors to my fonts section rather than using a direct download link, and I really don't know how many find their way back to the page they originally had interest in. My current "workaround" for that is to have that link open a fresh browser window, so hopefully people will be able to return from the font retrieving side-trip and pick up where they left off. Then again, if they're wandering off enjoying and learning about fonts, well, that's what this section is all about, so perhaps I've given them something after all!

For best results, though, give your visitors a link at the start of your page to a direct download for the version that fits their platform. If you can offer it as a single TTF or SUI, that's even faster, but remember that most shareware (and even most freeware) fonts can't be redistributed without the accompanying documentation in their ZIP or SIT archive.


Legibility
Finally, and perhaps obviously, the end result needs to be easy to read. The whole idea of using different fonts is to make your pages more attractive, not more difficult. This doesn't mean you can't use an ornate Olde English, but use it with care to legibility -- a heading, perhaps a brief paragraph, but a full page--?

After saying that, I must also add that I would certainly allow for circumstances that might call for more extensive use of a specialty font, such as Girls Are Weird (which is quite legible for a "fun" font although too small to use on the web), but again, keep an eye on the total appearance being created. Not everyone has the storage space or even wants 600+ fonts installed like this fellow I see in the mirror each day. Since many fonts need to be HTML-enlarged one, even two or more steps to display proportionally with the Web standard appearance, it assists immensely to preview your page from a fonts-incapable browser (such as Navigator 2.0 or Mosaic) so you can see how the page will look to those who don't have your font installed or are still using older browsers. A paragraph that looks fantastic in a special font at <FONT SIZE="+4"> is going to blast folks away in the standard Times New Roman at that size. By the same token, that delicate florentine style is going to be lost on anyone using 1280 x 1024 resolution if displayed too small.


Summary
Selecting a font for use on the Web involves examination of these "-ility" elements beyond the type's initial appeal: functionality, availability, legality, accessibility, platform compatibility, provisions for legibility as well as sociability for the font-challenged. Attention to each of these aspects up front can create a strong foundation that you will be able to web-build upon for many years to come, and your visitors will appreciate your efforts.

These are just basic keys you might want to consider, the barest outline of what I hope you'll find to be a helpful guide in preparing for your font-enhanced webpage. I'm no expert on design; I'm not going to tell you how many fonts you can use on a page at maximum or which ones they have to be. This section mainly focuses on the "tech" aspects of font selection. I'm no HTML dynamo either; those who are will notice I haven't even referred to style sheets, though the same basics apply for them. It just occurred to me as I was researching fonts for use with the <FONT FACE> tag that there may be a few people starting out who could benefit from what I've learned about choosing fonts for the Web and maybe sidestep a few common stumbling blocks.

As you proceed on to develop your own guiding preferences for font selections, you'll also become aware of when it's perfectly wonderful to deviate from guidelines and in what ways. Understanding the hows and whys to begin with puts you cyber-miles ahead, and rather than being restrictive as some may view it, assists in freeing you quickly from the bonds of rigid yet empty rules, yet provides room to unleash your individual creativity and develop your own personal style.

Happy Web-scripting! :)



For more tips on selecting fonts for the screen, follow this link to a Will-Harris House page. These folks know type.

Varian's Dreamfonts: Web Fonts Reference is a portion
of Varian's Dreamcatcher
and is Copyright ©2003 by Varian.
All rights are reserved;
none of this material is to be redistributed
on the Web or in any other form
without prior consultation with
and permission from the author.
Exceptions to this statement,
granting additional limited rights
for particular selected elements,
are noted and detailed
in context with those particular elements.

Marking up the WorldWide Web since 1995.