All of the samples on the right are 'selectable text', - no images.

One source of long standing frustration for web designers and website development has been the extremely limited range of fonts that are available for browsers across the major platforms (i.e. the different flavors of Windows, Macs and Linux). The handful of serif (Times New Roman, Georgia, etc.) and sans-serif (Arial, Verdana, Helvetica) fonts that can be rendered across these platforms are frankly mediocre. Taken as a group, they are not terrible, but they lack the style and elegance of many fonts that are not 'web-safe.' Website developers looking for the visual impact of these heterodox fonts generally resort to images for headers and navigation items. This, however, handicaps search engine optimization since headers and navigation items in a website are weighted by the search engine algorithms. To compensate, some developers will use the image as a background to text that is hidden from view using outlandish css declarations such "margin-left: -1000px;" or "line-height: 0.01em;", the theory being that the engines will read the selectable text even if the viewer cannot see it.

Some Misconceptions

Further complicating the situation, there are many dubious notions circulating among the web learned and laity. The two most egregious are:

1. To serve the needs of an aging population, designers/developers should stick to sans-serif fonts because studies have shown that they are more 'legible,' i.e. more easily processed.

This oft-repeated but seldom examined pearl of wisdom is rife with erroneous assumptions and muddled thinking. First of all, the methodology used in these studies is blatantly biased toward one kind of so-called reading: the rapid absorption of information via print. If reading can be said to make any sort of interpretive demands (aka as thinking), then this is not reading per se but rather scanning. Since their publication, the frameworks of cognitive psychology used to buttress this methodology have come under sharp critique. The assumption that this is the only or the most desirable mode of reading is absurd. We presumably do not read Mary Oliver or Jane Austen the way we might look up a number in a phone book. Cognitive psychology has regrettably declined the study of novels and poetry. If you are making a website whose sole purpose is convey facts or some reference, then - perhaps - this might serve as a guideline. But if you are interested in presenting content that contains rhetorical, narrative and cultural nuances that your viewer might wish to ponder and savor, then you might consider the care lavished by publishing houses on typography. The same subjects in these studies (in some cases, senior citizens or boomers with poor eyesight, like myself), were likely visiting their local libraries or bookstores shortly afterwards picking up novels, self-help manuals, histories, poetry, Bibles, what have you, the vast majority of which are printed in... serif fonts.

2. Given this situation, you just have to stick to one or two fonts that you can at least rely on.

Among the candidates I have heard nominated for this honor are Arial, Verdana, Lucida Grande, Times New Roman, etc. There is no actual consensus here because the variables of platforms, browsers, and monitors expose the absurdity of this belief. Helvetica and Tahoma look great in Firefox on my Imac. They are less compelling in Safari, and they look pathetic in just about any browser running in Windows. Arial looks okay in Windows IE, so-so in Windows Firefox, and just blah on a Mac. Verdana may or may not be an improvement in Windows - it seems to vary from one monitor to the next in pcs I have tested, and it is okay in a Mac, but not as good as Helvetica or Lucida Grande. Georgia looks very good on a Mac, fair in IE7, and not so great in IE6. The sizes, kerning and line-height of these fonts all render differently in each context. If you have a tight navigation using Arial or Lucida Grande in Firefox/Mac, your layout problems with IE7 and IE6 are only half the battle - Firefox in Windows will render these fonts much larger, sometimes breaking your navigation layout altogether. Since you cannot use conditional statements to target Firefox the way you can target IE, you have to strike some kind of compromise between the Mac and Windows varieties (not to mention the various Unix-flavors).

Ready to Give Up?

Do not despair - quite yet... There is actually a technique to embed almost any font you prefer in your web page. The font used for the 'body' text of these entire site is Constantia, an elegant serif font made by Microsoft (bundled with Vista). If it is possible to add heterodox fonts, then why, you ask, have so few availed themselves of this technique? The short answer is that the process requires labor-intensive planning, trial-and-error testing, and precise execution. That may be the long answer as well... You have to make separate font-files for Mozilla browsers and IE. You also have to have lots of suitable back-ups so the first choice degrades nicely for other browsers. Preparation of font files for Internet Explorer requires an archaic program called WEFT that dates from the baroque era. Is it worth the trouble? Perhaps...