The Ugly Truth About the Web

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 of your document.

  <!script src="javascripts/cufon-yui.js" type="text/javascript" />
  <!script src="javascripts/RockStar.font.js" type="text/javascript" />
  

• Finally, to render the text, call the function Cufon.replace(elements, css) to render specific elements in the chosen font.

  The first argument, elements, is a CSS selector, such as h1, or you can combine Cufón with jQuery to use its complex element selectors. The second argument, css, is a collection of CSS attributes and must include the name of your font, such as { fontFamily: 'Rock Star' }. You can also specify color and other attributes.

During replacement, the chosen element is replaced by a VML or HTML 5 canvas and the text of the element(s) is rendered in the chosen font. Presto!

Fun with a Font

Let’s try it.

Dieter Steffmann is a type designer who permits his work to be embedded in Web pages. You can find a vast assortment of his type faces online. For this demonstration, I downloaded the font named Pinewood.

Open the Cufón Generator and select the TrueType version of the Pinewood font. Within the form, confirm you have permission to use the font on the Web, scroll to the bottom of the Generator form to accept the terms of the license, and click Submit. Shortly, you should have a file named Pinewood_400.font.js.

Create a new HTML file and include the Cufón renderer and your new font. Create an h1 heading and type “Welcome to Summer Camp!” Before the close of the body, write some JavaScript to replace each h1 with rendered text. Your final HTML should resemble something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>
      Fun with a Font
      </title>

    <script src="javascripts/cufon-yui.js"
      type="text/javascript"></script>
    <script src="javascripts/Pinewood_400.font.js"
      type="text/javascript"></script>
  </head>

  <body>
    <h1>Welcome to Summer Camp!</h1>

    <script type="text/javascript">
      Cufon.replace('h1', { fontFamily: 'Pinewood' });
    </script>
  </body>
</html>

Open the file in your browser. The page should look like this (except your text will be black):

If you narrow or widen the page, the text should wrap appropriately. You can also use (some) CSS to stylize the text. For instance, the CSS snippet h1 {color: blue;} renders the text in the example blue.

It’s So Easy!

Cufón is simple to use and produces very nice results in all modern browsers, including Google Chrome and the latest build of Internet Explorer 8.

There are some caveats of course.

• If you enlarge the type on the page via the browser’s application controls (for example, View > Zoom In in Safari), the text rendered by Cufón does not scale in proportion. To affect the size of rendered text, you must re-render it with new dimensions.
• Similarly, any CSS attributes that affect the look of text after the page is initially drawn won’t work without special coding. For instance, the CSS h1:hover {color: red;} has no effect. You can, however, use events and JavaScript to achieve the equivalent programatically.
• Embed only the ligatures you intend to use. The more ligatures you embed, the bigger the JavaScript font file becomes. The Generator provides options to include one, a custom few, some, reasonable subsets, or all ligatures of a typeface.

  Here, converting Pinewood, a typeface with only numerals and uppercase letters, results in a 140K (minified) file. (For comparison, the Cufón renderer itself is only 16K.)

• At the moment, the word-spacing attribute is not supported and you cannot fully-justify text.

(You can find a list of all known issues on the Cufón GitHub page.)

All in all, Cufón has great promise and works out of the box today. Give it a try and make the Web a prettier place. Please.

Happy tinkering!