sIFR or Standard Fonts?
Jason wanted to use Futura Medium as the typeface for headers on Amigo. The only way to do this (to my knowledge) is sIFR, a clever technique with Flash that allows you to use any typeface you want, regardless of whether or not the user has it installed.
There’s one major drawback to sIFR though: if you increase your font size, it doesn’t dynamically scale. It will only rescale the browser text size if you reload the page. I think that this is a pretty big usability problem.
So in the end, we decided to go with bold Arial. Obviously not quite as fun, but definitely more user friendly.
Is it that big a problem?
I would have thought that those users who want/need large text will have their browsers set that way by default.
Comment by jazzle — May 23, 2006 @ 7:09 am
Form me the most annoying about sIFR is the fact, that you can’t scroll “over it”. At least in Opera, which is my browser of choice.
So if i scroll a webpage (via mouse-wheel) and hit a sIFR-Headline, i can’t scroll any further before i moved out of the headline. Same with iframes.
For me its not that big issue. Because most of the time i have plugins “off”. But people out there just “can’t choose” because they don’t know about stuff like that.
There is another strong issue with selecting text.
So, despites its a facinating technique, i cant recommend it at all.
The better solution would be sending “page-fonts” to the browser. Maybe some day…
Comment by Rolf-Thomas — May 23, 2006 @ 7:46 am
You might try hooking sIFR to the “ontextresize” handler we created at the Fork and Spoon Helmet. It’s been pretty reliable for us in spoofing an event handler for text resize.
Comment by Matt Sharkey — May 23, 2006 @ 7:57 am
I think sIFR is a great route to take. Purevolume.com incorporates sIFR and it has worked out great for them.
Not being able to resize your browser text dynamically is not to large of a hit on usability. I think its one of those things that just don’t really matter. Sure it’d be nice but where does it really play a part in the user experience?
At any rate, keep up the good work.
Comment by Arik — May 23, 2006 @ 9:22 am
Small world … I blogged about a way of getting the font size that’s quite like Matt’s method. My intent was to get the initial value of 1em set accurately — so if you wanted 1em=13px you weren’t guessing that the browser had a default size of 16px and therefore using font-size:81.25%. My code works but it ran into an issue with (drum roll please …) Internet Explorer.
Anyway, Ryan, somewhere between Matt’s code and mine might be a way to get around your sIFR issue.
Comment by Paul — May 23, 2006 @ 9:23 am
I say it’s just not worth it… sure Futura would look a little cooler maybe. So what? I’m not going to use a web app because the inteface’s typeface looks good. As long as it’s easy to use, and does what it’s supposed to do (and that’s beneficial to me) I’ll use the app happily.
I can understand certain commercial websites needing to use typefaces to keep branding — for headers and such. I just don’t see how it’s a big issue for a small web app.
Forget the sIFR and just use Arial.
Comment by Brandon — May 23, 2006 @ 12:35 pm
sIFR is an ugly hack; any right-thinking person can see that it sucks.
Have you seen what sIFR pages look like when the Firefox Flashblock extension is installed? Urgh. You made the right choice.
Comment by Tom — May 23, 2006 @ 12:38 pm
Thank you for being sensitive to font scalability issues. I wear reading glasses and regularly increase/decrease font size in Firefox to make things readable; we’re not all 20-somethings out here with perfect 20-20 vision, after all!
While we are at it, be sensitive to the issues of size scalability and the mix of graphic and text elements on the page. The lack scalability of the folders in the Yahoo! Mail beta may have something to do with the fact that when you scale up font size, the folder row heights remain fixed so that the folder labels at larger font sizes become unreadable. A nasty effect in an otherwise elegant interface!
Comment by Dennis D. McDonald — May 23, 2006 @ 1:34 pm
Forget sIFR. Too much harm for the dubious benefits.
Comment by Rimantas — May 23, 2006 @ 1:54 pm
We’ve run into clients saying “type must use this font” and they aren’t willing to budge.
Our solution is we have an image server that generates images for the text on the fly (it caches appropriately). Since we’re using dynamic pages, we just put a little tag in with the text that should show up and it’s that simple. Gives us a single centralized place to tweak with the markup and CSS for it, too–especially since we had to implement rollovers with it.
Since you can specify the size of the text in the URL to the text image server, it wouldn’t be too hard to hook into text resizing and have the text image resize as well.
Comment by Joel — May 23, 2006 @ 2:37 pm
I presume you’d like to use SIFR for headlines only. Aren’t your headlines allready bigger and bolder than your normal text? Scaling is definately not a big issue here. Don’t be holier than the pope.
Comment by Tinus — May 23, 2006 @ 3:27 pm
Yeah, not a big usability hit at all. Some people don’t want to use sIFR because they are fine with browser text, and I totally buy that rationale, but yeah, on-the-fly text zooming? It’s not done very often.
And as for the guy who posted this:
“sIFR is an ugly hack; any right-thinking person can see that it sucks. Have you seen what sIFR pages look like when the Firefox Flashblock extension is installed? Urgh. You made the right choice.”
Any “right thinking person” would know that what you just said is patently false. If a user has FlashBlock installed (any version that is anywhere close to recent… about a year old or newer), they will just see plain CSS-styled browser text. Get off the soapbox.
Comment by Mike D. — May 23, 2006 @ 3:40 pm
Coming from a graphic design background, I can understand the temptation of using a better font, but in the end I’d rather the app be quick and usable rather than have a nice typeface. I hate the slight extra load time that most sIFR implementations seem to have.
Comment by Tyler Jones — May 23, 2006 @ 3:55 pm
Word Tyler.
I echo that.
Simple is better.
Comment by Hal! — May 23, 2006 @ 4:00 pm
Hey Mike - nice to have you stop by! Hope things are rockin’ with Newsvine.
Regarding the above: I have to disagree with you. I regularly enlarge text when I’m reading on the web. I just find it easier on my eyes. If I’m 28 and I’m doing this, I surely can’t be the only one.
By the way, this post isn’t meant to be a slam on sIFR at all. It’s just not right for what we’re doing.
Comment by Ryan Carson — May 23, 2006 @ 4:59 pm
I understand that. It’s easy to realize that you’re simply stating and making a choice in the way you’d like to use typefaces. Which is fine. But there seems to be a lot of people here that don’t appear they’ve used sIFR for anything but a trial run or to play around with it.
Some of the conclusions made about it (by other users) just seemed a bit fueled by assumptions and not real world usage. sIFR is just as fast as using regular typefaces when used responsibly.
If you have a blog with no less than 60 posts on the homepage, then you probably shouldn’t be using sIFR. But for a web app with not that many headings, it could work just as well. And again there are solutions for text-zooming. But I guess for production, its just not a real big concern and I respect that.
Comment by Arik — May 23, 2006 @ 6:57 pm
There’s a fallacy in claiming that users don’t care about fonts. It may not be something they explicitly state (or even something that lands on their radar) but it’s naive to shrug off font as nothing worth spending time on. Just as colors convey a certain emotion and help build a brand, fonts can either add or detract from the user experience.
I recently worked on a project for the University of Alabama - the site was a winner with students in the mockup form, but the second round of feedback looking at the live site was less enthusiastic. The only difference between the two was the choice of font - we were using Franklin Gothic for the headers on the mockup but was Verdana on the live site. Users felt it lost a lot of its personality.
I think web apps are the same - even though they are first and foremost exercises in functionality, they also have the opportunity if they choose to take it to make people ‘feel’ a certain way. There’s a reason why people ‘feel’ a certain way when they interact with something made by Apple, why they get a ‘feeling’ when they look at a book cover by Seth Godin or a product homepage designed by 37s.
Comment by sj — May 23, 2006 @ 7:37 pm
If you want your custom typeface, sIFR is a good way to go.
The real question is, do you actually need your custom typeface?
Oh, and to the ignorant, misinformed, blinkered, sIFR haters:
Yes, sIFR is a hack - but you don’t think creating images server side is a hack? Or even image replacement in general? Tables for layout? Using a text/html MIME type to server XHTML?
I could go on, but I know you’re still not listening.
Comment by Andy Hume — May 23, 2006 @ 7:52 pm
Yep, I’m all for making the choice either TO use sIFR, or to NOT use sIFR. Not a big deal either way. But like others have mentioned above, most people who try to pile on about it have either a) never really used it, b) don’t understand it, c) make false assumptions about its benefits/drawbacks, or d) all of the above. To me, the best case *not* to use it is actually the simplest: “I’m just fine with browser text.” That is totally legitimate to me.
Ryan: sIFR is really only meant to be used sparingly on titles/headlines. Even if a user has a habit of invoking dynamic text zooming, it probably has more to do with the body copy than the titles.
Comment by Mike D. — May 24, 2006 @ 1:57 am
I’m intend on making sIFR 3 scalable. The alpha release [1] already zooms along in Opera, actually.
[1]: http://novemberborn.net/sifr3/alpha
Comment by Mark Wubben — May 24, 2006 @ 9:00 am
I agree with Sean Johnson’s assessment of the importance of type-face choices. I too have experienced times in web design where a certain font just ices the cake but has to be put aside. sIFR to the rescue, in most cases.
Also, I haven’t read anything on this yet, but what, if any, are the drawbacks to using the desired font in the font-family declaration (font-family: ‘Futura Medium’,Arial,sans-serif;) anyway? If the user has it, lucky them! (or maybe it’s not that easy…)
Comment by Colin — May 24, 2006 @ 10:40 am
Maybe - but the times when it is done are probably the times when it is needed the most.
Comment by Mathew — May 26, 2006 @ 4:07 am
As a graphic designer I don’t run into too many clients who have a problem with typefaces. For me, it’s a matter of educating the client. Helping them to understand that most of their visitors wouldn’t know Arial from Verdana.
I understand why they want something different. They want something that will capture their visitor’s eye. But I explain to them that the graphics I produce will capture the visitors attention. And, if necessary, I can use a different typeface in the header using Photoshop and it will look good no matter what browser their visitor is using. The website graphics don’t have too be fancy and neither does the typeface. It’s about the content not the images.
GrafxExtreme.com
Comment by GrafxExtreme — December 13, 2006 @ 4:42 am