Achieving a strong brand online is often challenging when it comes to the use of a corporate font. The standard methods are either using a system font that is likely to be available on your target audience’s devices or to use images to render fonts exactly the way you want them to appear. Latter method has a number of disadvantages: not SEO friendly, not CMS friendly, bad performance due to higher load times and not favorable from a WAI perspective. Using system font on the other hand is disadvantageous with regards to branding other than if your CI font happens to be Arial (or one of the 10 or so widely available standard web fonts).

Using sIFR on foamex.com (rendering VAG rounded)

Using sIFR on foamex.com (rendering VAG rounded)

A while ago we came across sIFR, a method to render any font on a website using Javascript and Flash. sIFR works pretty much this way: you download the package, copy the Javascript into to the appropriate folders within your web project, use the included .fla file to create the master font for the web (obviously you need to have the font installed on your computer) and copy the exported .swf file into your web folder. sIFR takes text from your standard HTML markup (e.g. inside a <h1> tag) and substitutes each character with a Flash character. This is done after the page is loaded (the JS is placed before </body>). If Flash is not available on the target device sIFR nicely degrades to HTML. It’s a solid method but somewhat tricky to install and has a couple of other disadvantages. We always found that the rendering was not as good as using images but we never upgraded to sIFR 3 which seems to be better in this regard. In terms of cross-browser compatibility sIFR did a good job but character spacing is a little bit off between IE and FF/ Safari which makes it difficult if you want to control line breaks.

cufon renders really nicely

Using cufon on a transparent div

Recently I stumbled upon a new method called cufón and I decided to use it for a new project. The installation of the demo was really easy and results looked totally the same on all browsers. The method sounds more complex in terms of what technically happens but neither the developer nor the end user notices any of this. Cufón consists of two modules: a font creator converts a font into VML paths (I am using this awesome site) which are then put into the web directory of your choice together with one more JS file. Just like sIFR you are using regular HTML markup and apply a special CSS class to the parts you want to be picked up by cufón for font substitution. Just like sIFR, cufón will also degrade to HTML if scripts are disabled on the target device.

The results are amazing: it’s super fast, excellent rendering and works on all browsers and platforms. The only disadvantage is that text is not selectable as every single word is put in one <canvas> tag. In IE 6 where <canvas> is not available a different method is used which allows to select text but only one word at a time. We are currently developing 2 new projects using cufón and we will post results here as soon as we go live.

Update: There is quite a bit of write-up on the net comparing different font rendering methods:


Subscribe to comments Comment | Trackback |
Post Tags: , , ,

Comments ( 1 Comment )

[...] opposed to a system font has been a huge issue for web designers for a long time. Luckily there is sIFR and cufon, 2 methods we use to realize dynamic rendering of fonts on web sites. The latest browser generation [...]

» 4 New Web-Typography Tips & Tricks added these pithy words on Sep 28 09 at 8:05 am

Add a Comment



Additional comments powered by BackType


© Copyright 2009 SUPERMETRIC FINDS . Thanks for visiting!