How and when to use sIFR

24 December 2004

Before embarking on an analysis of sIFR, let’s make sure everyone is up to speed on what it is and how it works. sIFR stands for scalable Inman Flash Replacement and is a technique for delivering truly customised typography on the web. It does this by replacing any text in a designated element with Flash rendered text as the page is loading. It is important to understand that it is not the element that is being replaced by Flash, but the text within it, leaving the element to be styled or positioned as normal.

Some facts about sIFR: not up for debate

The conclusion should be that sIFR is an accessible, mature technology, and that its use must be given serious consideration by designers and developers.

When to use sIFR

Like all web technologies, it is important to understand the best way to use sIFR and to realise the situations in which it is most appropriately used. It’s about choosing the right tool for the job; and there is one job in particular where sIFR leaps from the toolbox and begs us to give it a go.

The scenario: A large sports news website decides to style all their headlines in a unique corporate typeface. News stories (with their headlines) are published by different people, in different places, all over the world, via some sort of content management software. They can’t employ someone to sit in front of Photoshop and create a headline image every time an editor wants to add a news story!

In this situation, sIFR is a tool that is unrivalled in simplicity, accessibility, and extensibility. Some news sites implement a solution involving the building of images on the fly via PHP or other server side jiggery-pokery. This works well as a time saver, but has many disadvantages when compared to sIFR:

With sIFR, all that is required is one Flash (.swf) file and one Javascript (.js) file to be downloaded allowing all headlines on the site to be rendered in the corporate typeface.

This example was not just plucked from the air. It was the exact scenario that led to Mike Davidson developing the original Flash replacement technique back in 2001, for a redesign of Since then, with the input of Shaun Inman and others, it has grown in to the rounded and fluent technology we have today, and will likely have a major impact on web typography during 2005.

Using sIFR for links

The latest version of sIFR allows for linked text to be replaced. Although this is an exciting development it is almost always not appropriate to use it in such a context. This is due to the following accessibility issues:

Although these appear to be trivial issues, many people find broken functionality of these features quite frustrating. With the lack of status bar information it is impossible to get a clue as to where you may be heading next; and with the popularity of browsers such as Firefox and Opera, the contextual right click is becoming an increasingly used tool. Although sIFR provides a basic right click on links, the browser’s contextual options are unavailable.

Of course, these are limitations with Flash and not with sIFR itself. It is likely that some of these problems will be overcome in the future. The status bar for example can be controlled via Javascript, so it is not too hard to imagine some sort of functionality being added to display link targets. However, until Flash allows for a full browser contextual menu on links, I believe that sIFR is not quite viable for tackling this kind of text.


While most of the interest in sIFR is centred around the ability to serve custom fonts, an important consideration is also the fact that Flash text can be anti-aliased. Web developers often forget this, partly because so many are working with Mac OS X and its impressive Quartz font smoothing. However, Windows users (despite having the ClearType option buried in a display menu somewhere) are not likely to have anti-aliasing enabled, and the ability to have anti-aliased headlines shown to these users as well as pre Windows XP and Mac OS X users is an important consideration.

Fine tuning

One issue that I have heard mentioned a few times, is that sIFR does not allow for the fine control of text that is possible with an image. This is perfectly true. With an image you have created in Photoshop or Fireworks, you can exactly control kerning, stretching, anti-aliasing, or any other features such as drop shadows very accurately. A graphic’s editor is a true WYSIWYG medium. sIFR rendered Flash is not.

If this level of control is required then an image is still the best way to deliver the text, and sIFR is not the right tool for these situations. However, if the requirement is purely to deliver a custom typeface, then sIFR beats creating images hands down.

Loading speed

The rendering speed of the replaced text is an important consideration when using sIFR, and although speeds have been significantly increased since early versions, there can still be a distinct delay if there are many instances of sIFR on screen at one time. This is perhaps the best example of why using sIFR in moderation (ie. one headline per page, or headline per post) is currently the ideal way to use the technique.

This is one of the most frustrating drawbacks of using Flash replacement. The temptation when first implementing sIFR is to replace too many elements on the one page. For this to be viable, loading speeds have to be greatly increased; and although a nice nippy server will help you out, the true culprit is the time that the rather bulky Javascript takes to run.

The conclusion

sIFR is not a rival to image replacement; it is a separate tool that does a different job. It is best used with text that would otherwise be displayed in one of the browser’s default fonts, and not to replace custom built graphics.

The ideal situation for sIFR is when you would otherwise use an image solely to display a custom typeface or anti-aliased headline. This is done very frequently on the web, and sIFR is by far a better option in these cases. It scales to the users default font size, is selectable, degrades gracefully beautifully, and can be used on thousands of pages with only two files required for download.


Useful links