Clockwork Active Media Systems

On January 28, we stopped using sIFR to replace headings on the Clockwork site. Instead, we moved to Typekit. For you web type geeks out there, here are a few of the reasons why we changed as well as some comparisons between the typefaces.

sIFR, a Quick Recap

sIFR (Scalable Inman Flash Replacement) was released in April of 2005 as a way to use custom fonts in a web site without requiring the user to have the font installed on his/her machine. In a nutshell, it uses Flash to embed the font, javascript to display the Flash if the player is there, and it falls back on normal CSS if either Flash or javascript is not available. It quickly became a popular method as designers rejoiced over the ability to use custom typefaces on the web. Some well known sites that use or have used sIFR are GE, Nike, and Red Hat¹.

Of course, sIFR has its criticisms, including but not limited to:

• Issues with page loading time
• Ad blocker plugins which block the flash or add some sort of block button on top
• In general, relying on Flash to display something that really should be controlled with CSS

Making the Switch

For Clockwork, the benefits of having a custom typeface outweighed the criticisms of sIFR and at the time of our site launch last year there wasn't a better alternative. Use of the CSS @font-face property was gaining traction but there were still issues with different font files in IE (not to mention licensing); other available type-replacement services didn't have the custom typeface we were looking for.

Then in November Typekit launched to the public. Typekit is a service that hosts both free and commercial fonts and embeds them via @font-face. We first experimented with using it on Tweetwally with the font Madawaska, which is fairly close to the geometric slab serif type we were using on the Clockwork site.  However, none of us were that excited over it and didn't feel it would hold up as a replacement on the Clockwork site.

Recently, however, Typekit added several more foundries to their list of partners. Among them is Suitcase Type Foundry and a typeface of theirs, Kulturista Web caught our attention. With its sturdy serifs and 5 available weights we decided it was time to replace sIFR.

Typeface Comparison

Here's a quick look at the differences between our original slab serif (creatively named "Geometric Slab Serif"), Madawask, and Kulturista Web.

As you can see, they're all slab-serifs with evenly weighted stems and serifs, falling under the Neo-grotesque model classification. However our original is very geometric with the "o"s forming a perfect circle, while the second two are more narrow. While we didn't mind the more narrow letterforms (they are a better compliment to the type in our logo), some of the strokes of Madawaska's letterforms bugged us a bit. For example, the curved edge of the "h" and the bottom of the "b" didn't seem to fit right with the rest of the slab-serifs.

We're really happy with the new typeface and even more excited to leave behind our reliance on Flash. We hope you are too, but of course we welcome any feedback.

Sources

1. Wikipedia: sIFR - http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement
2. Wikipedia: Slab Serif - http://en.wikipedia.org/wiki/Slab-serif