As you may have noticed, the headers are now a different type face. Lucida Bright, to be exact. How did I do this?

sIFR, or scalable Inman Flash Replacement.

Note “Jamin” and “Hegeman” are nowhere in that name. That’s because I’m not the genius that is Shaun Inman, Mike Davidson, Mark Wubben, and Tomas Jogin, all who contributed to this amazing piece of functionality.

Simply put, sIFR lets you style elements using the font of your choice. My god, that’s huge! you say. Yes, it is. Or maybe you’re shaking your head and muttering that the technique has been around for a while. Yes, it has.

However, sIFR 2.0 Release Candidate 4 came out in late February, 2005. So that’s kind of new.

The technique is ideal for replacing header tags. You can specify which elements to replace using CSS cascading definitions, e.g., #content h2. It works if you have Javascript enabled and Flash installed. If you don’t, it simply reverts to the CSS, which you should define anyway. So this is definitely a worthwhile enhancement.

I’ve experimented with IFR in the past after seeing it in use on Shaun Inman’s site. Inman played a major role in the advancement of this technique, which is why it bears his name. Davidson took it further by making it scalable (more on this below). Learn more about the history of this technique.

How It Works

There are three components, basically. A Flash file (FLA), some Javascript, and some CSS. What I explain below is just a brief background, because you don’t really have to know how it works to implement it. If you want to learn more, use some of the links within this post.

The font is set in the FLA and exported as a SWF. The Javascript searches the document for the element or elements to be replaced. These elements are defined in a function within the the Javascript. And CSS is used to define the dimensions of the replaced tags before they are replaced. The SWF file uses the size of the replaced element to determine the size of the SWF file and Flash text.

That’s why it’s called “scalable.” You don’t actually define the size of the SWF text. You size the replaced element, instead. This allows for greater flexibility, as you can use one SWF file to supply the font for multiple tags, since the size of the replaced text is not dependent on the SWF.

Tuning the CSS is a little more involved than setting the font size of the replaced element to be a certain size. Line height and letter spacing come into play as well. So it does require a bit of tweaking. I found it required some trial an error before I got the hang of it. Tuning is explained in the readme file that comes with the download, and is further explained in the sIFR wiki.

• Download sIFR 2.0 RC4
• View Davidson’s example page with sIFR 2.0 RC4