Help! Help! I’ve been sIFRized!

Help! Help! I’ve been sIFRized!

sIFR: Scalable Inman Flash ReplacementFonts have always been a major concern in webdesign, or rather, the lack of fonts. To remedy this, I have recently installed sIFR: Scalable Inman Flash Replacement for all headlines. sIFR replaces all H1’s, H2’s etc with a flash rendition of the text. Naturally you can select any font you have on your computer – giving designers complete typographic control over their headlines. Not to be used as a text replacement for websites, so designers still don’t have 100% control over type – but its very nice and degrades well for non-Flash or Javascript enabled browsers.

The installation process is relatively easy, the directions straightforward. Simply edit a js file, include it in your source and create the font. Font creation involves the use of the Macromedia Flash editor where you simply select the font you want your text to render in – then export the swf. Font creation can even be sped via automatic sIFR font creation through JSFL, Flash’s internal scripting engine. Overall, getting sIFR onto your site is easy – making it look good is slightly harder.

The trouble comes in the tuning of your new flashy headlines. Letter spacing, line height, padding, font size etc are all variables that need to be tweaked to get the best looking headlines you can with your font. I spent a good amount of time staring at headlines with cut off bottoms before I finally landed upon the values that worked. You are not styling the flash, but rather a dummy text only version of the headline that is created a split second before displaying the page to the viewer. This dummy version attempts to mimic the flash font’s letter spacing and size so the javascript can accurately determine the real estate to occupy with the flash replacement.


Overall I really like sIFR – its great for someone who wants total control of design. Perhaps less important to others but designers are a particular bunch. While easy to install – its not easy to tune. Probably the biggest drawback is extra time it adds to your page load. This of course depends on your usage and number of headlines it is replacing.

Resources used:
wiki documentation
Not particularly informative but she does hit upon a good practice. It will make it easier on yourself if you first set the letter-spacing and font-size before before tweaking line-height. The line height can drastically alter the size of the box sIFR is trying to replace and skew your letter spacings and font sizes.
Danilo Celic’s Breeze presentation

  • Mark Wubben
    Posted at 08:16h, 11 May

    Hey, thanks for choosing sIFR 🙂 One thing though… you’ve set the `sIFR-hasFlash` class in the HTML source code, and the `sifr.js` file isn’t being loaded 🙂

  • Mark Wubben
    Posted at 08:17h, 11 May

    Oh, and your Flash header ate my CPU. Had to block it…

  • Jefte
    Posted at 09:55h, 11 May

    Thanks for taking a look Mark!

    Yeah, I’m still tweaking it. Left that in there from last nights late night session.

    What kind of system do you run (cpu speed)? Its not like there is a whole lot going on in the animation…

  • Patrick Mawyer
    Posted at 17:39h, 11 May

    my pimp govt laptop runs the flash animation just fine…crappy govt laptops….

  • Mark Wubben
    Posted at 06:39h, 12 May

    1.4 Ghz Windows XP… perhaps my Firefox is having issues.

  • Jefte
    Posted at 09:56h, 12 May

    Thanks for prompting me to address the cpu usage, Mark. I’ve posted a reply to your issue – let me know if it alleviates some of the load. I really am dissappointed when people are forced to turn off my flash, at least now users can stop the tail-wagging. If you are still blocking the flash I have also updated my alternate content to display a raster copy of the flash – not nearly as cool, oh well.

Post A Comment