The Ugly Truth About the Web

Tired of Arial and Verdana? Add some sizzle to your Web pages with a new open source project that can render any font in a page. (Flash not required.)

If you’re single, male, and work with computers, I know a gal you have to meet. She’s worldly, well-educated, talented, and ambitious. Her looks? Well… let’s just say she has a great personality.

Who’s the gal?

Fellas, meet HTML.

While HTML has many virtues, what it produces isn’t very attractive. Text flow is restricted to a sole rectangle; bounding boxes are rectilinear; and text effects are practically non-existent. Worse—at least given the current state of Web browsers and associated standards—the entirety of human emotion, intellect, and creativity must be rendered in ten (or less) vanilla fonts (Arial, Courier New, Georgia, Lucida Console, Symbol, Tahoma, Times New Roman, Trebuchet, Verdana, and Zapf Dingbats). Ugh.

Somewhere, Giambatista Bodoni is spinning is his grave.

Standards? Ha!

And, alas, due to technical and legal complications, the Web is likely to remain a typographically monotonous place for the foreseeable future. It’s a catch-22. While CSS2 supports Web fonts, the feature remains largely untested because foundries, designers, developers, and operators have yet to find an equitable licensing scheme for typefaces. (Like other creative works, a typeface is protected by copyright. To use a typeface within a page, a site must have the right to publish it, making it available to all consumers.) Meanwhile, there’s little incentive to break the legal stalemate because applicable standards aren’t widely implemented, even years after ratification.

Moreover, and as type designer David Berlow mentions in his recent interview with A List Apart, existing standards are unimaginative, akin to “… a fourth-grader’s crayoning abilities: no shadows, in-lines, outlines, fill variety, twisting, perspective, set on a bouncing line, or opaque over another object, much less [motion.]”

Certainly, the dilemma is frustrating and explains why many turn to bitmaps and Flash to create compelling, exclusive, and signature site content.

For example, the Zen Garden replaces the text of headings with background images to achieve much of its eye candy. Other sites are implemented as Flash movies, and a very few employ a Flash variant named Scalable Inman Flash Replacement, or sIFR. According to its project page, “sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses, be that Foundry Monoline, Gill Sans, Impact, Frutiger, or any other font, without the user having it installed on [his] machine.” sIFR combines Flash, CSS, and JavaScript to conjure its magic, as shown in this recent demonstration.

While workable, both bitmaps and Flash are hardly ideal. The bitmap solution requires a unique asset for each heading, an unmanageable liability for a site with a great deal of dynamic or multilingual content. sIFR requires Flash, which is acceptable; however, sIFR is difficult to deploy and the results are less than spectacular.

Cue Up Cufón

So, what’s a designer and developer to do? Resort to chisel and stone? Lead type? PDF?

Sure, but before you break out your marble slab, Gutenberg press, or copy of Adobe Acrobat, try Cufón.

Cufón replaces text elements in a Web page with VML-rendered shapes in Internet Explorer or HTML version 5 canvas shapes in other browsers. The entire solution is driven via JavaScript, and the end-result is much the same as the bitmap solution—text is replaced by an image—although rendering is dynamic and need not be prefabricated.

Here’s how it works.

  • Assuming you have purchased the rights to embed a specific font in a Web page, you convert the font to JSON data via the Cufón Generator.

    You can use the Generator online or download the source code from GitHub and host the application yourself. The Generator can convert any TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript font (additional formats may be supported in the future).

  • Next, you must include the Cufón renderer and your font in your Web application. The renderer is also provided as JavaScript.

    For example, if your font was named Rock Star, you would include two lines in the