Ever since the earliest days of the internet until now, web designers everywhere have had to make do with less creative latitude than their print designer brethren, and this is no more evident than in the area of typography.

Designing with Type

Designing with type has always been a mainstay for print designers who use typography to evoke interest and emotion from their compositions. Unfortunately, on the web, font choices remain desperately thin which can contribute to sites looking monotonous and anemic and lacking of character and panache. Up until now, one way to avoid settling for the handful of tired cross-browser fonts was by creating an image that would be used in the place of browser-generated text. Although this seems to meet our needs on the surface, this creates a couple of problems: what images deliver in control and compatibility they sacrifice in seachability (ie. by Google and others) and their ability to handle dynamic content (ie. such as content pulled from a database). Images are great, but they have their limitations.

Enter sIFR

Enter sIFR (or Scalable Inman Flash Replacement - I pronounce it siff-er). Developed way back in 2005 by Mike Davidson, sIFR is a chunk of javascript code that renders a Flash file as text in whatever font you specify–which means that you can use any font you desire, as long as you own it. There is a little front end work via downloading and installing the files and potentially a little debugging to get this working on your site, but once you have it aup and running you’ll begin to reap the benefits of Flash-generated text.

Tips to Follow when using sIFR

1. Use Sparingly: While you or your web developer can render section titles, page titles, page title descriptions and callouts with sIFR, because of the load on the client (the visitor’s browser) to render each line of Flash text, you won’t want to use sIFR to render an entire web page or site.
2. Beware of widows: There is the potential to render, for example, an article title from a database in two lines where you have a full first line and one word on the next line; this should be avoided by measuring the length of the pulled string and chopping it in a way as to leave more than one word on the second line.
3. Flash penetration: although most people have Flash, not all do (Adobe, the makers of Flash, say >97% do. But that’s ok; the great thing about sIFR is that it will revert back to render your type as you have specified the CSS if Flash is not present on the visitor’s browser.
4. Keep fonts choices to a minimum: sIFR does not provide a license to go crazy with the use of fonts; like any document you create, your website should be limited to, at the most, three type faces.

For those who do not want to compromise their designs on the web by using the web’s limited offering of fonts, sIFR provides a compelling alternative with few drawbacks. Notwithstanding those noted above, sIFR is currently the only way that this writer is aware to create dynamic text on the fly with any font you have available, delivering sophistication to go along with a website’s substance.

Sites utilizing sIFR that we’ve designed include:

• Sylvite Group of Companies
• Starward Homes
• Ultramatic Sleep