sIFR – SEO Friendly Typography

For as quickly as the internet has become second nature to millions of people across the world, it still can’t seem to keep up with the demands of the designer—typography is no exception. As of this post, designers are limited to only six “web safe fonts”—Arial, Courier New, Georgia, Times New Roman, Verdana, and Trebuchet MS. Keeping Search Engine Optimization (SEO) and web standards in mind, it seems unlikely that a Flash based option could potentially solve your typography woes.

Introducing Scalable Inman Flash Replacement (sIFR), “an open source JavaScript and Flash based technology initially developed by Shaun Inman and improved by Mike Davidson and Mark Wubben that enables the replacement of text elements on HTML web pages with Flash equivalents.”

As mentioned earlier, HTML and CSS only allow the use of web safe fonts—it’s safe to assume that these fonts came installed on your computer. “sIFR on the other hand allows website headings (and other text) to be styled in any font by enabling the designer to embed the font of their choice in a Flash element that displays the text. As a result the font used does not have to be installed on the user machine.”

Essentially, any assigned headings (h1, h2, etc…) will be converted to Flash files with the embedded font when the website is loaded. However, any search engine spider coming through your site will still be able to read all of the page content.

A more common alternative to sIFR (but one that could get your site penalized by the search engines) involves creating an image, setting it into the heading background, then hiding the actual text using CSS. In today’s crazy world of blogs and dynamically generated content, creating an image for each new heading isn’t very efficient – especially if you’re performing multiple updates a day. In comparison, sIFR will automatically load any tags you have set in your style sheet—essentially a “set it and forget it” method.

Since its release in 2005, many international companies have adopted the use of sIFR, including:

• ABC News
• Nike
• redhat
• Aston Martin

Still not sure if sIFR is right for you? Have a look at an example page.

Not convinced yet? How about a list of advantages and disadvantages:

sIFR Advantages

1. Displays your headlines in virtually any typeface

• Ideal for companies with corporate fonts and identities that want to stay visually consistent with print media. (Check your typeface’s licensing agreement to see if online embedding is allowed.)

2. SEO friendly

• Content/copy “spidered” as HTML

3. More dynamic than images

• • Can be easily created “on the fly” for dynamic content

• • Faster copy changes/updates

• Selectable text

4. Graceful degradation

• If Flash and/or JavaScript is not detected, sIFR defaults to your standard CSS styles

sIFR Disadvantages

1. Limited control

• • No kerning

• “So/So” anti-aliasing

2. Flash required for editing/setup

3. Flash player required for viewing

• Version 6.0 and above

4. JavaScript required for viewing

5. Only headlines recommended

6. Minimal use recommended (per page)

• 3–5 (or less) instances per page

On a final note, sIFR is not seen as a long-term fix, but rather a temporary alternative to image-based headers. If you’re currently running a website that requires frequent updates and/or custom typefaces and want to streamline the process (while remaining SEO friendly) sIFR might be a good alterative to look into.

Looking for more information? Visit www.mikeindustries.com/sifr for documentation and files.