Help! Help! I’ve been sIFRized!

11 May Help! Help! I’ve been sIFRized!

Fonts 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.

Conclusion

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:

http://wiki.novemberborn.net/sifr/show/HomePage
wiki documentation

http://www.communitymx.com/blog/index.cfm?newsid=408
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.

http://macromedia.breezecentral.com/p67619682/
Danilo Celic’s Breeze presentation