Playpen #6 - sIFR Headlines

I've been meaning to experiment with sIFR headline styling ever since hearing Dave Shea's Fine Typography On The Web piece during the @media 2006 conference. I've finally got a demo going at playpen #6.

What does sIFR mean?
sIFR stands for Scalable Inline Flash Replacement, and is an unobtrusive JavaScript/Flash solution for providing lovely fonts on your site (eg for headlines) whilst still remaining accessible, and not relying on that font being installed on a user's machine. Read more about the techniqute by visitng the official sIFR Wiki/Documentation site. H1 and H2 headings are best restyled using sIFR, rather than large bodies of text. If a browser does not have JavaScript enabled, the headlines will just be styled by the regular CSS definitions, so it degrades gracefully.

Why Bother?
There are several techniques for image replacement. The Gilder/Levin method is one such (see Dave Shea's article which explains some of the others too). Gilder/Levin is recognised as one of the best from an accessibility standpoint. But the down side, is that you have to manually generate each graphic used to replace your text, plus add a specific CSS rule for each in your stylesheet. That's all very well if you have a smallish, static site, and not many headings to replace. But what about database-driven sites and blogs, where you don't know in advance what the text will be which needs replacing? The only practical way to go is sIFR under these circumstances.

Where Can I Get It?
More information and a download for the code can be found at Mike Davidson's sIFR page.

Where Is It Used?
Keep an eye out for any sites which use unusual typography for headings or recurrent elements. If this is a database-driven site (such as ecommerce or blog), the chances are, sIFR will be the method that's used. Two likely candidates off the top of my head are:

• iPod411.com
• Bobble's Blog (it's not all about cup cakes)

@media, Fine Typography On The Web

by Dave Shea. Downloadable from Dave's website archive.

Typography affects tone. Leading affects readability. Across all platforms and OS's, the designer only has about 10 fonts to rely on being installed - not very good.

• Times New Roman - if you use this, it looks like you've made a mistake, or your style sheet hasn't loaded!
• Arial - really a ripoff of Helvetica, a safe choice, but boring. Read: The Scourge Of Arial
• Verdana / Georgia are a good pair for sans + serif fonts. But they could become non-safe backups in due course as MacOS X will not neccessarily carry them.
• Trebuchet MS / Comic Sans alternatives, but Comic only really any good for doing kiddies stuff.
• Lucida Sans / Palatino (serif) might like to think about them.

Font Survey websites are all very well, but they don't tend to be very representative of the general populace as the only people that fill in the surveys are the sort of folks who care about typography!

Fonts to look out for in future release of Windows (Vista):

• Calibri (sans) - good for body copy
• Cambria - a bit more subtle than Georgia
• Candara - probably best reserved for headlines
• Consolas - a monospaced font which will be great for code examples
• Constantina - better for larger sized text, eg headlines and pullquotes
• Corbel - excellent all-rounder

NEVER USE THE FONT TAG AGAIN!!!

So how do we get sexy fonts on web pages?

• You could embed a font in a page with this:
  

  @font-face { family:myfont; src=url(myfont, eot);
  } in the css, then,
  h3 {font-family: myfont, serif;}
  in the markup
  

  This has its problems, mainly that Font Foundaries are very ansty about you distributing copyrighted fonts.
• Scalable Vector Graphics would be fantastic but most browsers aren't currently supporting SVG.
• sIFR - scalable Inline Flash Replacement. Uses Flash
  to transform text in <h2> tag, say, to a flash object representing the h2. Need to embed some javascript to do it:
  

  <script
  src="sifr/sifr.js"
  type="text/javascript">
  </script>

  Fallbacks - if you don't have JS or flash, you can write a fallback to style the original h2 with CSS as now.
• Image Replacement - two methods: Phark (negative text indent) which can be a bit dodgy for accessibility
• Gilder/Levin - need to look up
• CSS3 - but can't remember what he said about this :-(
  

So what to use for various circumstances?

• CMS - Use CSS or sIFR
• Ensured Control - Use an Image, Image Replacement or sIFR
• Kerning Control - Use Image or IR
• Well-styled - Use Img, IR or possibly sIFR (in due course) but not CSS
• Font Scalability - Use CSS, possibly sIFR later
• Search Engines - Use CSS for best results

References: Typographic Design: Form & Communication
A List Apart - Dynamic Text Replacement
Font Explorer X - windows version due soon.
Googled for a "Flash of unstyled content" - there is a fix for IE.