Web Standardistas - HTML and CSS Web Standards Solutions

Cufón - Fonts for the People

Select the font you'd like to use...

Although there are many designers creating notable examples of beautiful web typography using default web safe typefaces alone (Coudal Partners, Jon Tan, Clearleft…), designers that might have wished to venture beyond the confines of Georgia, Arial, et al. have traditionally been faced with one of only two options: using images (of type) or using Flash.

With the rise of the web standards movement and the need to satisfy Mr Google’s need for easily indexed text, it soon became apparent that this scenario - replacing plain text with a Giant Whooping GIF™ or a standalone Flash movie - was a less than desirable solution to the typography problem.

Although accessibility for impaired users and non-desktop devices certainly had its role to play in re-assessing the effectiveness of the Giant Whooping GIF and standalone Flash movie approach, the primary reason for keeping your text as HTML was Mr Google. Semantically marked up HTML text can easily be found and indexed by search engines, Giant Whooping GIFs and standalone Flash movies cannot.

Several clever image replacement techniques using CSS have been developed over the years, however, they have all shared the same drawback: the designer has to manually create each image used for replacement. Whilst this is fine for a small site, it quickly becomes unmanageable on a larger scale and doesn’t work at all with dynamically generated content.

About five years ago, a solution of sorts evolved in the form of sIFR (Scalable Inman Flash Replacement) which offered a more sophisticated take on the image replacement conundrum.

Using a combination of Flash, JavaScript and CSS, sIFR allowed designers to specify their typeface of choice and dynamically replace HTML text with nice, shiny, custom type; allowing designers to employ rich typography on their web pages without sacrificing accessibility, search engine friendliness, or markup semantics.

The sIFR solution was almost ideal: any text could be dynamically replaced, even better, the text could be selected, copied and pasted - in other words, it behaved just like ‘ordinary’ text. However, sIFR had one distinct drawback: It required Flash.

Although we feel some sympathy for Mr Moll, who allegedly hasn’t had the need to open his copy of Flash for four years (and wishes to build on that record), the pain of having to use Flash to create your custom typeface file has possibly been a little exaggerated, the reliance on Flash is a more pressing issue for a device that doesn’t (and probably never will) support the technology… Did anyone say iPhone?

Good news. An alternative for font embedding might have finally arrived. Cufón, recently emerged on the scene, “aims to be a worthy alternative to sIFR” which is easier to set up and use, and eschews sIFR’s requirement for Flash in favour of a combination of JavaScript, HTML Canvas and VML. (Don’t worry, you don’t need to heavily research HTML Canvas and VML to use it.)

Using Cufón is remarkably easy:

  1. Download the Cufón JavaScript;

  2. Generate a font (you can use the hosted font generator or run a copy of your own);

  3. Replace your text using a line of JavaScript (to give you an indication of the lack of complexity of this operation, replacing all of your h1 elements would simply require this line of code: Cufon.replace('h1');); and

  4. Take care of IE (should you choose to do so).

Easy as pie.

Cufón is a new kid on the block and there’s no denying that there are still a few issues that need ironed out if it’s to fully take hold. Not least the fact that, as it stands, the generated text can not be selected, copied and pasted, i.e. it behaves like an image and not like text. However, given time, one would hope issues like this will be resolved.

Another, more complicated issue, is that of the EULA (end-user licensing agreement) for the typeface you’d like to use on your web site. Traditional EULAs specify the number of machines you’re allowed to install a typeface on, whether using Cufón might break these EULAs is still a grey area. As the typeface is converted to a JavaScript file that is easy to copy (read ‘steal’), there are genuine and understandable concerns expressed by type foundries about this.

However, there are a number of well-designed typefaces available under generous end-user licensing agreements that you might consider using in the interim.

Towards the end of his very thorough article Exploring Cufón, Mr Moll hints of talks between type foundries and Cufón’s creator Simo Kinnunen, suggesting that they have been very positive thus far, pointing out:

Technologies such as this encourage the use of typefaces other than the standard set we’re all used to [and] inevitably could increase the demand for typefaces. Therefore, type vendors and foundries have a vested interest in seeing @font-face, Cufón, and similar technologies flourish.

There’s no question that it would be in the interest of type foundries to work with projects like Cufón (and similar initiatives) to allow designers to legally use legitimately purchased custom typefaces on their lovingly crafted web sites. Positively, Kinnunen is ready and willing to make adjustments to Cufón as needed to facilitate this.

The web is growing exponentially. There are no shortage of designers seeking to bring the beautiful typography we’re accustomed to seeing in print to our screens. Cufón looks set to be a welcome step in that direction.

1237730700 · Follow Us on Twitter

@standardistas: Check out Pears, a delightful, expandable, open-source pattern library from @simplebits: http://t.co/9ymlx27m