Scalable Inman Flash Replacement (sIFR)
One of the major limitations of web design is the number of available fonts. Traditionally, designers have been limited to "web safe" fonts like Arial, Verdana, and Times. These work well for all of the main page copy but most designers I know like to use nicer looking fonts such as Futura, Univers, or Trade Gothic for things like headers and pull-quotes.
For years, developers have handled this the only way they knew how... Photoshop. 150 pages meant 150 GIF files of rendered text. This solution is obviously time consuming and makes maintenance a nightmare.
Enter Scalable Inman Flash Replacement (sIFR). In a nutshell, sIFR lets you take CSS-styled text and, using some fancy javascript, dynamically replace the text with a Flash SWF file of the text rendered in the font of your choice.
Since this replacement is done dynamically, the underlying (X)HTML code isn't affected. Users with the Flash plug-in installed will see the intended special font. Users without will instead just see regular CSS-styled text in a fallback font such as Arial. Search engines and screen readers can also easily pick up the underlying text without problems.
See an example page using sIFR
A word of caution… As with any trendy new technique, sIFR should be used in moderation. While it is pretty efficient, you're still creating Flash files on the fly and dynamically replacing text using javascript. This is a great technique for things like headers but it wasn't really designed to replace massive blocks of text so keep that in mind when you implement it.
For more information see:
Leave a comment