Design & UX - - By Jason Beaird

A Brief Introduction to Text Replacement with SIFR

Webfonts are great, and their adoption by a growing number of browsers has really helped push web design forward. Services such as Typekit make it easy to implement webfonts without a lot of hassle. Unfortunately, there are still a few reasons that you might want to use text replacement — licensing restrictions on the fonts that you need to use for branding reasons being chief among them.

One of the most popular options for text replacement is sIFR (pronounced “siffer”), which is an acronym for Scalable Inman Flash Replacement — a technology that allows designers to use Flash and JavaScript to apply their choice of fonts to headings.

The sIFR Logo

The basic premise behind sIFR is that Flash movies have the ability to embed fonts and display them in all their anti-aliased beauty to the vast majority of web users, who have Flash installed, and that JavaScript is able to replace specified HTML objects with Flash movies.

By putting these two concepts together, web designer and developer Shaun Inman was able to create a technique he called Inman Flash Replacement (IFR), the precursor of sIFR. IFR was a revolutionary development in typography for the Web, but it had a few minor shortcomings. Its most notable downside was that it could only be used to replace a single line of text. Recognizing the potential of this technology, Mike Davidson and Mark Wubben, along with countless supporters and testers, have put together a well-documented and easy-to-implement solution — sIFR — that has been released to the development community as open source.

Those who are skeptical of Flash and JavaScript solutions to the Web’s problems can be reassured by the knowledge that sIFR is a completely accessible solution that degrades gracefully. If users don’t have Flash installed, or they have JavaScript turned off, they’ll see the plain old browser text that the script and Flash were supposed to replace.

Finding examples of sIFR text on web sites can be difficult, especially when they use it to display fonts that are typically installed on many computers. ABC News, for instance, used to use sIFR to show news headlines in Futura, as the figure below illustrates. Futura is a font that’s installed for OSX users by default, but by using sIFR, ABC can be assured that a large majority of its users see headlines in the same typeface.

ABC News, featuring Futura headlines powered by sIFR

To download the latest version of sIFR, and access the full installation instructions, visit Mike Davidson’s sIFR Page or Mark Wubben’s sIFR Wiki.

Have you used SIFR to replace text on the sites you’ve built? What tips or warnings can you share?