// Showcase: Superb Examples of Slick sIFR Typography
// Mar 26th, 2008 & filed under Showcase, TypographyI would imagine most of you have come across sIFR at some stage. If you don’t know what it is, in brief,
“sIFR lets you use your favourite font on your websites by cleverly working with Flash, JavaScript and CSS.”
It tends to gain a lot of love/hate attention, but since the release of v3, I tend to side in the camp of those who support its careful usage. As Mike Davidson says,
“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.”
Sadly, like most things, sIFR is often misused. However, below is a showcase of some of the best and varied examples I could find. Some of them are just downright gorgeous.
For most of them, I was able to figure out the font used, but there’s a few at the end I didn’t know. Please give your thoughts, and add your favourites which are not on the list, in the comments.
#1 Shaun Inman - the daddy of sIFR (scalable Inman Flash Replacement). I don’t think Shaun is too actively involved in further development of the project, but he sports one of its best examples on his personal site. Edit: it seems sIFR isn’t at work on Shaun’s site, but I’m not sure what he’s done to get a similar effect. Some nice Javascript alternative he’s whipped up most likely. Any ideas? sIFR font - Univers 59.
#2 Subdued - A recent redesign by Bart-Jan Verhoef on his personal site. It really blends beautifully with the rustic look. sIFR font - Din.
#3 Don’t Trust This Guy - Jim Jeffers, a young creative professional, created a site implementing many aspects of what CSS3 has brought, so you’ll have to use Safari to get the full effect. sIFR font -Bodoni Svty Two.
#4 Emeril’s Holiday to Go - Great, and effective design. sIFR font - Clarendon.
#5 Dkoo - Derrick Koo really caught my attention with this. The colour scheme, background, and white space are excellent. sIFR font - (primarily) Swiss Thin.
#6 Iamkoa Labs - I don’t need to say anything, this just rocks! sIFR font - Bauhaus Demi.
#7 A Brief Message - A pleasant, left aligned, grid based design. Take note wannabe designers; a good design doesn’t need hundreds of graphics, it needs a solid structure. sIFR font - Apex Serif.
#8 Curtis Henson - Chris is a new kid on the block it seems (correct me if I’m wrong), as far as the WordPress community goes, and he has already jumped in to developing premium themes. Nice design. sIFR font - Avante Garde.
#9 Squawk Design - I found Dominik Lenk’s site a good number of months ago, when it was going around the galleries. Unique, and well crafted design. sIFR font - Geo Slab 703 Md BT (or so he says).
#10 Dutch Celt - Once upon a time, Egor was a real skeptic of sIFR, but he’s been a convert for some time now. sIFR font - Helvetica Light.
#11 Contrast - Irish designer Eghon has started blogging with a bang (to say the least). He sports some entertaining thoughts on his unique and space generous design. sIFR font - Futura bold.
#12 Relate4U - Not much to say. Nice design, although it’s a little impersonal. sIFR font - Univers 47
#13 Trevor Davis - I just came across Trevor’s site yesterday. It’s nice, but it would be a lot better if there was more line space around the body text. It’s not my favourite example (a little unbalanced), but it’s different. sIFR font - Franklin Gothic.
#14 Louder Than Ten - Maybe a little heavy on the sIFR, but I really like it. It’s one of my favourites I found. Excellent overall design. Soothing shades, ample white space, and great typography. Top job Travis! sIFR font - Futura STD light, medium and bold.
#15 Ars Thanea - They say they, “specialize in hi-quality, creative websites and illustrations.” Maybe, but I just like their headlines! sIFR font - Diavlo Light.
#16 Aston Martin - Something tells me the conversion rate on this site wouldn’t be very high. Anyone who visits just stares at the beauty of the car, and dreams. The site has been using sIFR for a long time, but I thought I’d include it to show that commercial developers are using sIFR too. sIFR font - Optima.
#17 Concentric Studio - Nice design, really nice. sIFR font - Galaxie Polaris.
#18 Alex Buga - This design has had it’s fair share of exposure, but Alex sure knows how to create striking designs. sIFR font - Unknown.
#19 Mike Industries - I had to include Mike. He’s one of the reasons we have sIFR, and has given countless hours to the project. sIFR font - Agency Gothic.
#20 Paragraph - One of the older designs, but it still looks good (that’s what happens when you don’t go all out on ’shininess’). sIFR font - American Typewriter.
Did you enjoy this article? Please share it -
You may also like to read the following:
30 comments...What do you think?
Trackbacks...
- Showcase of sIFR typography | Sideblog | Smashing Magazine
- // Showcase: Superb Examples of Slick sIFR Typography Via Smashing Magazine | Futurosity Grapevine
Thanks for including my site, some of my favorite designs are in this list. I may not be new but my site definitely is.
Squak, Louder Than Ten, and Alex Buga gotta be my favs on the list.
Curtis - No problem. I’m glad I came across it. It was one of the last I found, so it just made it. I wasn’t aware of your site at all.
Thanks for adding your favourites. If you’ve any more examples not included, be sure to let me know.
Is there an easy way to tell if a page using this sifr or do you just have to look at the fonts visually and tell if they are standard or not?
Jacob, right-clicking the text and seeing “About Adobe Flash Player” is a give-away, also checking the source for the sIFR javascript is another way to tell.
The easiest way is if the font actually looks really good, chances are it isn’t a standard web font.
Great list, thanks for compiling. The dutch website rabobank.nl (one of the largest banks in Holland) also uses it, and the website geenstijl.nl also uses sIFR. In one of my new website I’ll also be using this technology.
Here’s a direct link to the sIFR website. http://wiki.novemberborn.net/sifr
There are so much nice ones on there 0.O I like them all but I especially liked the Emiril one!
Some really great designs here, I must say. A Brief Message is a daily read!
I’ve never used sIFR before, but I wish that I could’ve discovered it sooner.
I’ve already discarded loads of designs based on the fact that they relied heavily on a particular fonts, that going for system-font approaches just killed the design.
@Curtis: Seems like you’ve got yourself a huge error, there..
Jacob - Curtis answered the question, but one other way is to highlight the text, and see if the highlight is black. That’s usually a give away too. However, it’s not always possible when the text is hyperlinked.
Curtis - Thanks for answering buddy!
Sander - Thanks for the extra links. I particularly liked the second one.
I was going to discuss sIFR a little more from a technical side, and reference all the related links I know of, but I decided against it for this post, and just briefly introduced it instead. I’ll maybe write about it again sometime.
Emma-Shireen - Yeah, it’s one of the best examples of sIFR being used in the most effective way, without lowering the load speed of the site.
Eivind - It’s never too late to learn and implement
Oh ok thanks… so does the person have to have flash installed to view it?
Jacob - Yeah, and javascript enabled. So it is limited to a degree. However, it degrades to any font you specify, and works just like normal.
@Armen: Nope, it’s not:) And for the record, I’m now officially broke until April 1st
Eivind - I’m not surprised (at the fact you’re broke).
Eivind - Yeah I moved web hosts and I had a bit of a hiccup (like the huge one you noticed).
Ah, I’d done the usual ‘it’s flash; it sucks‘ deal regarding sIFR when I first saw it, so I’m pretty surprised to see it being recommended by a W3C member.
Though being Flash, I’d say it’d be only suitable for little bursts, not full page formatting, though either way, I’d never even considered it an option before now, so thanks for the heads up man.
Great job on the list too, if anything, seeing sIFR in action is what really promotes it.
P.S. –Mike Industries is using a font named ‘JI Lilliwaup’.
Thanks for including us on your site!
All our sIFR instances use Galaxie Polaris.
http://www.vllg.com/Village/GalaxiePolaris/mudTyper+Weights/
We’ve always been a fan of sIFR… just never had the opportunity to use it (and use it successfully)
Norlick - You’d be spot on in saying it’s only suitable for “little bursts”. Any more than headline usage, or some other smallish element, and it’s overkill.
Thanks for letting me know of what font Mike is using. I’ll update the post shortly.
Glen -You’re very welcome.
I couldn’t figure out what it was you’re using there, so thanks for letting me know.
Like I said at the beginning of the post, I’m a fan of it too, but I haven’t implemented it yet. I will some day though.
Wow, thanks for the overview!
Ironically, Shaun isn’t using sIFR! The best way to see if sIFR’s being used is to inspect the Flash movie using Firebug. If it has a class name of .sIFR-flash, it’s sIFR.
I’d also like to clarify that sIFR 3 is still in beta – a pretty awesome beta though!
Thanks for including my site in your list. Just curious as to what you mean by my sIFR text being a little unbalanced (I’m clearly no designer). I definitely wanted the headings to stand out.
Nice article! Some good examples of sIFR use, wich gives the user the freedom to use that specific font wich is part of his/hers company’s identity.
The font used in #20 is American Typewriter medim or bold if i’m not wrong.
Mark - I had no idea (obviously) Shaun wasn’t using sIFR. So what’s he doing, or using to implement the chosen font?
Thanks for leaving a comment.
Trevor - It’s just a little heavy and dark, and makes the look a little unbalanced. I think something with less weight would be more fitting. However, that’s just my opinion.
Bobblehead - Thanks for the comment. That’s the font I thought it was too, but I’m just not 100% sure. I’m not the best at identifying, and I’d rather say I didn’t know, than mislead.
Another great example that myself and Eoghan from contrast.ie was this site. Its an e-commerce website that uses it. http://clerysbedstore.ie
Fonts Used:
Aston Martin - Optima
Mike Davidson - Agency Gothic
Paragraph - American Typewriter
Nice article! Some good examples of sIFR use, wich gives the user the freedom to use that specific font wich is part of his/hers company’s identity.
The font used in #20 is American Typewriter medim or bold if i’m not wrong.
Yes indeed.. sIFR is such an amazing thing! even I gave it a little try and it came out well on my website..
There’s a very useful article on Marko Dugonji?’s website explaining how to implement a two color sIFR.
Hope you guys like to check this:
http://www.maratz.com/blog/archives/2005/03/11/two-color-sifr/
sIFR 3 supports multi-color text natively, so I’d advice everyone to try that instead
Alan - Thanks for the link. That’s a really nice site you created. A little slow to load, but nice.
Ken - Thanks! I’m going to to update the article straight away.
Shantha - Yeah, I think it’s pretty amazing too.
Mark - Thanks for answering for me. I’d agree; sIFR 3 is a much better option.
Thanks for the comments guys!
Great selection of sIFR-using sites. I think you could include Andy Clarke’s stuffandnonsense.co.uk as a great example of sIFR usage.