31 August 2005

Web typography

I came across Mike Davidson via New York-based Behavior, the badasses behind the redesign of The Onion's online edition. (They're also responsible for the AIGA Forums and some sexy work for HBO.) Anyhow, Behavior made use of Davidson's sIFR (aka Scalable Inman Flash Replacement), technology which provides the nice looking custom type headlines you see on sites like this one, Nike, ABCNews, Aston Martin, and others.

(Davidson wasn't alone, he and Mark Wubben worked along with a invaluable stable of beta testers, supporters, and educators like Stephanie Sullivan and Danilo Celic of Community MX, worked to completely rebuilb a DOM replacement method originally conceived by Shaun Inman.)

What sIFR allows one to do is deliver your preferred typefaces to viewers, particularly useful for maintaining consistency across print and www. It's a no-no for entire pages of copy, paragraphs, et al., and instead suggested for headlines, pull quotes, and other small swaths of text. In other words, it is for display type — type which accents the rest of the page. Body copy should remain browser text.
How it works

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

  1. A normal (X)HTML page is loaded into the browser.

  2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.

  3. If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".

  4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.

  5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

For more info, check the above links or here: Introducing sIFR: The Healthy Alternative to Browser Text.

No comments: