cufón vs sIFR (A Visual Comparison)

Type design for the web is a subject usually discussed amidst snickers and groans and only occasionally peppered with epiphanies not dissimilar to “why didn’t I think of that?” While only a speed bump along a path of monolithic obstacles we face as we forge the Next Big Thing, web type has become a symbol of every designer’s frustrations with this fantastic (and finicky) medium.

For eleven weeks early Winter months of 2008, I taught eighteen design students at the Art Institute of Portland how to stop worrying and learn to love web type. I covered the basic rules of readability, hierarchy and emotional impact. I evangelized the importance accessibility and web standards, how they allow us to design for different mediums as well as those with sensory impairments. I honestly and pragmatically demonstrated the technical limitations of HTML and CSS.

And then I showed how to get around them.

A favorite technique for myself and my students was the use of sIFR, though its quirky setup and reliance on Flash eventually made me re-evaluate its necessity. I returned to embracing native web fonts like Verdana and Georgia (thank goodness for Matthew Carter) with a smattering of @font-face here and there. Not until last week (while working with Elizabeth Miller at Studio D) did I encounter a need to try the latest JavaScript-powered web type solution, cufón.

There’s a lot to like about cufón. Its use of the canvas tag in most browsers and VML in Internet Explorer eliminates the need for any proprietary plugins. Setup is surprisingly swift; generate the JavaScript with the handy online form, call the Cufon.replace method and off you go!

But there was something else, too. I swore cufón looked better.

Only one way to find out!

The Side-by-Side Comparison

I marked up and styled a side-by-side comparison of both cufón and sIFR in action. I kept both as close to a default configuration as possible to maintain an “out of the box” appraisal of both (this is especially important considering how much faster cufón’s setup already is in comparison to sIFR). I chose to use the excellent Museo Sans typeface due to it’s attractiveness and practicality.

See the comparison

Observations

Overlay comparison of cufon and sIFR output

cufón and sIFR’s output was remarkably similar at large sizes, but disparities between the two increased as size decreased. Text rendered using sIFR appeared smaller and sharper, while cufón’s results were heavier and smoother.

sIFR’s text showed inconsistent line-heights for multi-line text at smaller sizes, and introduced subtle yet inexplicable white space at the top or bottom of an element. cufón appeared to more accurately respect the dimensions, weight and style of the text that was being replaced. sIFR’s text link had more predictable behavior, but did not appear to respect the page’s link style as rigidly as cufón. Despite this, cufón’s lack of text selection may make it feel less native to fans of copy and paste.

Conclusion

Both solutions perform wonderfully for large header text, and neither are recommended for any sort of lengthy body copy (if not for aesthetic reasons, then certainly for performance). Based on the appearance of the secondary header and its overall respect for the style and layout of replaced text, I declare cufón the superior visual choice.

My admittedly limited use of this package also suggests it to be a superior technical choice as well, as it is faster and more intuitive to implement. Until the use of and ethics surrounding font-face become less ambiguous, cufón will likely become my choice for rich, dynamic web type.

Responses

Koes says

One thing that I wish you could do with cufon is the ability to select text. But I heard that feature is on its way.

Responded

matt says

It does seem like sIFR is a little better at handling itself when the page text-size / zoom is adjusted through the browser – check it out in firefox and chrome for some interesting differences in behavior. In partiular, firefox turned back 3 clicks makes cufón’s smallest text size almost unreadable, while sIFR is still nice and sharp. chrome’s zoom behavior triggers the sIFR’s flash dimensions to reflow the text, which looks kind of cool, but actually ends up breaking the dimensions of the page more than cufón’s does. Crazy – I hadn’t heard of cufón before (shows how much interestingly designed stuff I’ve had the opportunity to do recently, huh?) but it’s always good to find another weapon for the old solutions arsenal.

Responded

Tyler Sticka says

sIFR does handle resizing and text selection better than cufón, and that certainly may be enough to keep some designers at bay. cufón’s behavior for these two actions is essentially the same as a static, image-based solution. With cufón, you’re getting roughly the same visual and behavioral result as you would exporting the text from Photoshop as a PNG, except that it’s dynamic.

Responded

Eric says

Great post. I had an IE6 window open for a site I was developing so I took a look at your test in that. SIFR looks considerablly better there.

http://www.rgbdesignstudio.com/cufunSIFR.jpg

I know that cleartype is on, though it is XP Pro, perhaps Vista would make a difference.

Responded

Tyler Sticka says

cufón doesn’t just look worse, it actually wasn’t working in IE6 on that page!

I did some digging, and discovered something really important and horribly documented: cufón relies on jQuery’s selection engine for legacy browser support.

Since I wasn’t using jQuery at all on the comparison page, I instead opted for Sizzle (the stand-alone selector engine) and wrapped it in a conditional comment to spare modern browsers the 25kb download.

Nice catch, Eric!

Responded

chriskalani says

Weird, for some reason the cufon isn’t working for me in the example at all. It’s just Verdana…

Responded

Tyler Sticka says

I’ve tried it in multiple browsers (Firefox, Safari, Chrome, Opera, IE) on multiple platforms (Windows 2000, Windows XP, Windows 7 and Mac OS X Leopard) and have had it work every time. What platform are you using?

Has anyone else encountered difficulty viewing the cufón example?

Responded

chriskalani says

It seems to be working fine now, no idea wtf happened I didn’t change anything. I think I still like sIFR better.

Responded

Leave a response

Your email address won’t be published. You can use some HTML or Markdown.