Ion the early days of the Web there was one big problem that drove designers nuts; trying to create sophisticated page layouts using real typefaces.
In the early days of the Web there was one big problem that drove designers nuts; trying to create sophisticated page layouts using real typefaces.
The problem existed (and, in fact, still exists) because when the markup on a page specifies that text is to be rendered in, say, 12pt Bodoni MT Poster Compressed, a user’s machine may not have that typeface. The consequence is that the browser is forced to substitute another typeface which, in turn, will usually compromise the integrity of the page layout.
In the early days of the Web the solution was to rely on standard browser-supported fonts for most text and then render the text that was to be in some flashy typeface as a graphic. Obviously this was not an ideal solution: The graphics could add significantly to download size and rendering speed and making changes became slow and clumsy.
Today, we have a variety of solutions that allow us to reliably render pretty much any font we please in a browser. A great open source, freeware example of this is Cufon created by Simo Kinnunen. This typeface rendering subsystem consists of two parts: A data module that defines the actual typeface to be used and a browser-based renderer.
The data module is generated by the Cufon generator which is available on the home page of the Cufon site. Here you select the typeface to be used along with options such as which decorations (bold, italic, etc.) and which glyphs (upper- and or lower case, numbers, etc.) are to be included. The output of the generator is a version of the typeface in Scalable Vector Graphics (SVG) format that is then converted to Vector Markup Language (VML) and embedded within a chunk of JavaScript. Curiously these transcoded fonts are usually considerably smaller than the original TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts that Cufon supports.
According to the Cufon “About” page the renderer has three parts: The “Core, which provides the API and common functionality, and two rendering engines. One [rendering engine] renders VML shapes and is used for Internet Explorer (it supports VML from version 5.5), while the other one uses the widely supported HTML5
Adding Cufon to a Web page is simple and just requires referencing a Cufon script and the font script. You then specify what tagged content is to be replaced by Cufon rendered text. For example:
Cufon.replace(‘h1’);
Cufon.replace(‘#sub1’);
Complex selectors such as #sub1 above require the support of a selector engine (JavaScript framework) and Cufon supports jQuery, Sizzle, MooTools, Dojo, Prototype and several other popular frameworks.
There’s also a Cufon API that supports a variety of advanced functions such as having Cufon refresh its renderings (useful if you’ve used AJAX to change page content) and setting default values for options (such as changing which typeface is being used).
I’ve used Cufon in a couple of projects and I’m really impressed. It is lightweight, flexible, and very effective and a great example of open source freeware. Highly recommended.
Next week, we’ll look at a commercial browser font rendering system and consider why you might want to pay for such a system.
