Blog

To sIFR or not to sIFR

October 13, 2008

Hop Studios is on a quest to make the internet easier to use and prettier to look at. Sometimes, however, these two goals come into direct conflict - The techniques needed to create unique and attractive web sites are sometimes unwieldy and buggy. Take for example, sIFR, or Scalable Inman Flash Replacement, a brilliant idea from Shaun Inman to allow for more diverse typography on the web. You can read more about its recent incarnation on Mike Davidson’s Blog. Hop Studios has used sIFR on several of our projects.

Web sites are composite creatures, and when you look at type on the web it’s not coming from the internet at all, it’s pulling the fonts from your personal computer. Because of my job I have hundreds of fonts, but you may only have twenty or thirty. Using CSS I can ask your computer for any font, but if you don’t have the font I request it will get replaced with something else. If I want my designs to look the same across many user’s computers (and i do!) i need to pick from a limited selection of standard fonts. You know these guys, you’ve seen them before…. everywhere.

sIFR is a way around this limitation. It works like this: You create a parallel typeface file in flash and attached its use to any HTML tag you like using CSS. This file is stored on the server. When a page is loaded a short javascript checks to see that the Flash player is installed, then replaces any tagged content with the flash generated letterforms.

Why is this good? Well it means that you can have diverse type that is dynamic - pulled from a database, and you don’t have to create images for all the instances of interesting typography on your site. It’s searchable, something that images are, and for a long time, flash was, not. And it’s scalable - you can deploy this tool once and use it across your site many times in many ways.

Why is it bad? It’s complex and problematic, sIFR employs four different technologies to functions correctly, XHTML, CSS, Javascripts and Flash. This means it has multiple fail points. It’s tough to maintain and can sometimes behave oddly in the page. If you place sIFR next to a floated element it explodes to many times its original size. Finally you cannot replace large blocks of text, sIFR works best on display type, like titles and pull-quotes.

The creators of sIFR fully admit its limitations, Mike says:

While sIFR gives us better typography today, it is clearly not the solution for the next 20 years. It is but a nice stopgap for people who value the importance of typography and don’t want to wait 1, 5, or 10 years for browser makers, OS vendors, and type foundries to figure out a better solution.

In short, it’s a complex solution to a complex problem, and should be used with care. Hop Studios generally tries to pick the best possible cases to use sIFR, and implements it sparingly.

Posted by Matt Gardner at 2:50 PMTracker Pixel for Entry

Comments

Here’s a non-Flash based image replacement alternative. Easier to implement but, again, not flawless.

http://facelift.mawhorter.net/

By Kevin from Vancouver on Oct 15, 2008

Thanks Kevin!

I’ll have to check this out. After just a quick glance at the code it seems interesting - it generates image files (with very complex file names!) and replaces the text with them. What happens when it fails?

pretty interesting Though!

By Matt Gardner on Oct 16, 2008

Did you try sIFR 3? It is still under development, but has far less issues than v2, while being more flexible.

By Mark Wubben on Oct 16, 2008

Hi Mark - thanks for your comment! I haven’t had a chance to fiddle with sIFR 3 yet, how long do you think it will be in Beta?

By Matt Gardner on Oct 16, 2008

The advantage to Facelift (FLIR) is that once it’s been uploaded and configured, you set it all in motion through your style sheet. I can’t recall if sIFR does this? It probably does…

The short version of the story with FLIR is that the font you so desire in your web interface is set as the first choice for a CSS selector’s font-family. It seems that if it fails, the second stated font-family appears in its place and so on until it reaches ‘sans-serif’ or whatever is at the end of the line.

That should allow it to degrade quite nicely should people not have javascript enabled. Try is on the homepage http://facelift.mawhorter.net/ It us.es it’s own technology. Go there and disable your javascript.

I’d advice using it sparingly though, and given that I’m so new to using it myself, there are probably several drawbacks to it I’m not yet aware of (beyond what I’ve discovered already).

And looking at the source code of the pages that use FLIR, it seems it’s still SEO friendly too. You can test that out on the FLIR homepage as well.

By Kevin from Vancouver on Oct 16, 2008

Thanks for putting in the divider between the comments. Much easier to read!

By Kevin from Vancouver on Oct 16, 2008

Matt, there’s still some stuff that needs to be done, and I’m not prioritizing it. Could be a while. That said, r419 is much, much better than v2 already.

sIFR doesn’t work through CSS by itself, although that could easily be added by a 3rd party extension.

By Mark Wubben on Oct 17, 2008

yeah….

I’m not a typographist but back in 90’s I was crazy about collecting fonts and had nearly 1000 fonts in my Pentium III PC

Slowed down my PC like hell.

By Robbie on May 14, 2009

Hi Robbie - you can use a program like Suitcase or fontbook on the mac to turn-off fonts you aren’t using, it frees up a lot of ram.

The 90’s were a sort of silver age of font creation - tons of great grunge and icon fonts from first-time digital type creators.

By Matt Gardner on May 14, 2009

I always try to avoid using sIFR. Too many comp. problems with it.

By Joseph Acai on Aug 9, 2009

...that is the question.  There is just so much to learn when it comes to this stuff. I have never used sIFR cause I don’t know much about it and have done fine without delving into it.

By Jordan from Vancouver on Sep 4, 2009

I’m just starting to get into this stuff and you have some great info for beginners. Thanks for the helpful post.

By efusjon on Sep 12, 2009

the font manager built into leopard isn’t bad but is lacking compared with suitcase. it’s good to travel light and only have professional, staple fonts installed anyway.

By Ben Resv on Sep 14, 2009

Yest that is the question. I choose not to sIRF.

By Amega on Mar 22, 2010

Commenting is not available in this channel entry.

From the Blog

  • Click to fill out the Hop Studios Quote Request Form



 

Recent Blog Posts

RSS Feed


Archives