Web designers have long had to rely on unique images if they want to have a specific font for a header, which is time consuming, expensive, bandwidth intensive, and not very flexible. sIFR is an extremely simple way of converting content into anti-aliased text in the font of your choice, rendered on the fly, with full css/(x)html degredation if flash and/or javascript are not enabled (~4% of the general population?).

How it works

Taken from the original blog entry made when the technique was announced in 2004:
The following explains the sIFR process:

  1. A page is requested and loaded.
  2. Javascript detects if Flash 6 or greater is installed.
  3. If no Flash is detected, the page is drawn as normal.
  4. If Flash is detected, the HTML element of the page is immediately given the class hasFlash. This effectively hides all text areas to be replaced but keeps their bounds intact. The text is hidden because of a style in the stylesheet which only applies to elements that are children of the html.hasFlash element.
  5. The javascript traverses through the DOM and finds all elements to be replaced. Once found, the script measures the offsetWidth and offsetHeight of the element and replaces it with a Flash movie of the same dimensions.
  6. The Flash movie, knowing its textual content, creates a dynamic text field and renders the text at a very large size (96pt).
  7. The Flash movie reduces the point size of the text until it all fits within the overall size of the movie.

As of now this is the most current documentation and download for the technique (2.01). There is also a support forum.

Pros

sIFR is currently at version 2.01. Work has been done that minimizes some of negative aspects of the technology. While it isn’t perfect, it is certainly at a robust production quality status, having been incorporated into epsn.com, abcnews.com, sprint.com (a description of how that went), etc. The sprint page has an estimated ‘money saved’ bit that could be very useful when pitching the technology to higher ups (find “work load”).

This list is from Usabletype.com:

  • sIFR does not require any changes to the (X)HTML code, all the work is done by Javascript, Flash and CSS.
  • If the user does not have Flash installed or Javascript enabled then the (X)HTML text is displayed and styled by CSS.
  • sIFR is scalable, and when rendered will adjust to the users font size settings.
  • sIFR is compatible with all screen readers. No problems or issues have ever been reported.
  • sIFR text is selectable with the mouse, although visual confirmation of the selection may be absent when selected with body text.
  • sIFR does not affect search engine placement or ranking, nor does it hide textual content from search engines or users.

You can try viewing this test page, and resizing the browser window, increasing or decreasing the font size, then refreshing.

While a refresh is needed – it’s still a heck of a lot more flexible than a static image replacement solution. Add to this that if you use a responsible em based text layout people shouldn’t need to change their default size once coming to your site, and if they radically change the window size enough to cause cropping it would have happened with static images anyways.

Cons

If you want to hear the devil’s advocate screaming, here’s a vitriolic post made by against the technique, followed by a response from one of the creators.

Due to the limitations of Flash, there are some minor concerns. The visual feedback on selecting text can be rather glitchy, links rendered with sIFR don’t show targets in the status bar. Again you can’t copy/paste text in an image at all…

Conclusion

If you want to have appealing headers while not being tied to unique images and all the pitfalls associated with them (eg redoing ALL of them when fonts change instead of simply altering a central file) and enforce a visual identity across a large scale website sIFR is a great solution. It is important not to get carried away and use for general navigation and content – enough calls and you will see a slowdown in page rendering time. As flash improves, and the technique is refined, some of the shortfalls will undoubtedly be addressed, but it is a proven technique that major corporations have decided was worth taking – and more importantly have continued to use.