Cufon: Web Typography Reloaded

A few years ago a group of web developers created a Flash application that allowed designers to use almost any font in websites without compromising on search engine visibility. The application is called sIFR and is still used by many designers and developers – but there’s a new kid in town.

Web Typography Example

Web Typography Example

Web Typography Example

The sIFR technology replaces certain bits of text (i.e. page headlines) with a Flash element. This Flash file reads the content of the text element it replaces and renders it in a different font. Any True Type font can be assigned. We used sIFR for one of our client’s websites www.integrateimprove.com. While sIFR helped revolutionise the way in which websites are designed and laid out it has always been relatively tricky to set up and configure. And an even bigger issue has surfaced rooted in the fact that all Apple devices, including iPhones and iPads, do not support Flash.

While sIFR defaults back to the HTML text when Flash is not available it forces web designers and developers into a compromise and accepting that their websites will look different on different devices.

A new solution called Cufon promises to fix some of the sIFR issues. Cufon is very similar to sIFR in the way that it replaces a piece of text with a new element. But it sets itself apart in the fact that it is JavaScript based and does not require Flash. Hence the replaced Coufon text is visible on iPads and iPhones as well as every other device that supports JavaScript.

In order to get Coufon to work the font you are planning to use on your website has to be uploaded to the Cufon website cufon.shoqolate.com/generate. The website will read the font file and generate a java script file in which the outlines of each character are stored. This Java Script file can then be included in the website that features the Cufon replaced text.

We have tested Cufon in our web development team and are confident to use it for our clients’ websites, if the need arises.

Tags: , , , , ,

Comments are closed.