Web Fonts: The Shallow Hal Effect Last week, I got in (or rather, lost) an Internet fight with Merli

by admin

Web Fonts: The Shallow Hal Effect

Last week, I got in (or rather, lost) an Internet fight with Merlin Mann. He talked up the virtues of his lovely new typeface. I decided to be a jackass and mocked him for spending $200 on what is essentially a free font.  

It was a ludicrous allegation on my part—while I could indeed care less about the character sets, the subtle differences in glyphs (the tail on the a, t and capital R are the most important, for my money) are quite significant. Above all else, Clarendon is a notorious space hog and essentially unusable in text sizes at screen resolution in its standard weight. 

What I should have said was that Sentinel is a $200 Georgia, because if you look at Kung-Fu Grippe, chances are pretty damn good that’s the font you’re going to find. @font-face, the most straightforward and elegant way of ensuring your visitors see the font you want them to see, cannot be used with the vast majority of typefaces, due to licensing restrictions. 

Call it the Shallow Hal effect: web designers pick a font they love, and it makes their site look great. But for visitors don’t who already have the font installed on their computer—in the case of Sentinel, just about everyone—it just looks like the same tired set of typefaces on every other website.

The sad thing is, it doesn’t have to be this way. There are plenty of good looking open-source fonts out there (such as the one on top of this page) and plenty of interesting ways to style them with CSS3.

Granted, it’s not a full set of weights, obliques and character sets, but you can console yourself that any visitors not using IE6 (or—for now—MobileSafari) will see your type the way you meant it to be seen.

And it won’t cost you $200.


*I would be remiss not to mention other ways getting specific fonts into a webpage:

  1. Image replacement. Replacing the text with a picture of the text. This inflates page size, search engine performance, eliminates the potentialy dynamically generated text, and generally gets in the way of things.
  2. sIFR, or the Scalable Inman Flash Replacement. Basically, a Flash player loads your text. The user sees the right font but can’t download the source file. Similar problems with image replacement, but with the added hassle of requiring Flash and javascript and being confusing to set up, though it does allow users to copy/paste the text. 
  3. Cufon, a no-Flash JSON-based (javascript) alternative to sIFR. Still tricky to setup, some small problems with letterform, no text selection, and possibly some copyright issues.
  4. Typekit and related services, which host fonts and farm them out (with authentication) to your site sites. Still requires javascript, costs money, limited to fonts that have signed on with the service.