cufón vs sIFR (A Visual Comparison)
Published on
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!
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.
Observations
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.