Cufón vs. Typeface.js, which one is better?
Cufón and Typeface.js are both methods to show text in custom fonts (like sIFR), are both only a couple of months old and both use canvas or VML. So what’s the difference? And which one is better?
How does it work?
Cufón and Typeface.js both work by converting a regular font file into an internal format. On execution, they display the font using Canvas in modern browsers, and VML in Internet Explorer. The benefits of doing it this way is that you do not need to load the Flash plugin. This makes it faster compared to sIFR, and visible on more computers.
Quick stats
Cufón and Typeface are very similar, here’s a quick list of their properties:
| Cufón | Typeface.js | |
|---|---|---|
| File size | 14.0kb (compressed) | 16.3kb (uncompressed) |
| Supported browsers | Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome and Internet Explorer6+ | Firefox 1.5+, Safari 2+, and Internet Explorer 6+, but not 8 |
| Supported file types | .ttf, .otf, PFB, postscript | .ttf |
| Supported font styling | font-size, font-style, font-weight, line-height, text-shadow, color | font-size, font-style, font-weight, font-stretch, letter-spacing, line-height |
| Selectable text? | not yet | not yet |
| Cufón | Typeface.js |
Font Conversion
Both Typeface.js and Cufón have an online font converter:
You upload your font, select which glyph groups (which are sets like uppercase, lowercase, numbers, punctuation etc.) you want to include and it returns a .js file containing your font. Typeface.js only supports TrueType (.ttf) fonts. Cufón also supports OpenType (.otf), Printer Font Binary and postscript. The converter for Typeface.js has a build-in check for the font license, and will refuse to convert any font that doesn’t allow embedding.
On uploading, Typeface.js forwards to a page where you can select your glyphs and download your file. Cufón lets you select the glyphs on the first page, and also give you the option to include a bold and an italic variant in the same file. Besides that, it allows you to restrict usage to certain domains, and set the quality of the font (lower quality is faster performance).
I used both to convert Optimer with uppercase, lowercase, numerals, punctuation and extended latin. Cufón’s file is called Optimer_400.font.js and is 27.3kb while Typeface.js’ file is called optimer_regular.typeface.js and is 68.7kb.
Including Cufón or Typeface.js in your website
Cufón and Typeface.js both work by linking to their javascript file and the font file in your <head>:
Cufón
<head>
…
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Optimer_400.font.js" type="text/javascript"></script>
…
</head>Typeface.js
<head>
…
<script src="typeface-0.11.js" type="text/javascript"></script>
<script src="optimer_regular.typeface.js" type="text/javascript"></script>
…
</head>To select which elements to convert, you have to add the following <head> for Cufón:
<script type="text/javascript">
Cufon.replace('h1');
//If you also include a library, you can add complex selectors like #content h1
</script>Typeface.js does things a bit differently, and in my opinion, easier. Typeface.js automatically changes all heading elements that reference Typeface.js fonts (which is the first part of your font file name, in our case optimer, and any element that has the class typeface-js:
<div class="myclass typeface-js">
…
h1, h2 {
font-family:optimer;
}Multiple fonts
Both Typeface.js and Cufón allow you to load in multiple fonts. Typeface.js finds them automatically when you specify them in your CSS, and Cufón allows you to use multiple fonts by specifying the font-family in it’s initial function:
Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); Internet Explorer 7
No party would be complete without someone trying to ruin it for everyone, so here’s internet explorer’s problem: for both Cufón and Typeface.js, the script can have a couple of milliseconds of delay, causing the text to ‘flicker’. To stop it from doing so, place the following code right before the closing </body> body tag:
Cufón:
<script type="text/javascript"> Cufon.now(); </script>Typeface.js
<script type="text/javascript"> _typeface_js.renderDocument(); </script>Side by Side
Of course, all this is fun, but it would be nice to see them in action besides each other. No worries, I’ve made a Demo Comparison Page.
On rendering, you can see a number of spacing differences. There are especially noticeable when looking at the spacing in the typographic scale, where Cufón performs much better than Typeface.js
Conclusion
Which one is better? Cufón or Typeface.js? In terms of functionality, the difference is small. Cufón supports more filetypes, Typeface.js supports more CSS properties. Both however, support the stuff you’re most likely to need. Typeface.js is easier to use (just use the right font-family and, if it’s not a header, add a class), Cufón is about 40kb smaller in total and handles spacing better out of the box.
For now, Cufón performs slightly better due to handling spacing better, but I don’t think there is a clear winner. That just means that the race is on: the first one to add selectable text wins!
Next Week
Come back next week for an article on how to combine these techniques with @font-face!
70 comments
Hey man,
Erg goed stukje, heb er veel aan! Thnx!
Great comparison Kilian!
For the time being, Cufon seems the winner. Wondering if/how both handle linked headers. A common use-case is to have headers (i.e. of blogposts) link to the full post. Cufon/Typeface would need to properly support hyperlinks in H’s and hover-styles, etc. I have not yet had/taken the time to check ‘em out. Any ideas?
Obviously the most elegent solution seems to be to use this as alternative for @font-face for browsers that support it. I will be looking forward to this next article.
Erm, I seem to have overlooked the links in your demo-page :-)
[...] Source [...]
Great comparison. One thing that Typeface.js lacks is support for Pixel or screen fonts (like used in Flash). Does Cufón support that?
Thanks for the in depth comparison, I’ve used both and drawn pretty much the same conclusions, but for me the winner was Cufon with the smaller footprint and OTF support.
[...] Cufón vs. Typeface.js, which one is better? [...]
Very useful! I’m already using Typeface in my blog and it works well! I’ve tryed to use Cufón but had no sucess.
Hehe, you think IE’s the one crashing this party? The “flicker issue” is a minor one, imo.
Unfortunately, the different browsers have different ways of reporting computed styles, which is presumably the method typeface.js uses to automatically get the font-family. Cufon lets you (requires you to?) specify the font in the replacement function.
See, FF2/3 and IE6/7 both return a comma-separated list of the CSS-specified fonts, which is the most useful behavior for font-replacement techniques. IMO, this is the appropriate behavior.
Chrome and Safari (and presumably other webkit-based browsers) return the first of the specified fonts, whether it’s supported by the client or not.
Opera returns only the ultimately applied font — if none of the specified fonts are supported client-side, then the browser default is returned.
For example, if you have {font-family:Gibberish, “Custom Font”;} with a browser default of “Times New Roman”:
FF2/3 and IE6/7 will return “Gibberish,’Custom Font’”
Chrome and Safari? “Gibberish”
And Opera “‘Times New Roman’”
I would bet that this deficiency (as I see it) in Opera is the reason typeface.js, which pulls the font-family from the CSS, doesn’t support Opera. So, IMO, it’s Opera (and Chrome/Safari to a lesser extent) who’s the party-crasher here :)
Also, in your initial comparison table, is it really fair to compare the compressed Cufon filesize with the uncompressed Typeface filesize? :P Just a note.
I don’t know why Typeface doesn’t list Chrome in their supported browsers, as it seems to work fine there.
Can’t wait for the @font-face post!
[...] Cufón vs. Typeface.js, which one is better? � Javascript � Kilian Valkhof [...]
Thanks for the comparison. I really find it useful.
Cameron Moll also posted a great article about Cufón just the other day.
It is a great resource too if you are exploring sIFR alternatives.
Excellent comparison. Both ways are better than sIFR, in my opinion. Cufón now lets you add :hover styles and support text-transform and letter-spacing as well.
Oh, and adding a display:inline-block to the replaced element stops flickering in IE, but it have drawbacks.
(Sorry my english, I’m brazilian)
[...] Cufón vs. Typeface.js, which one is better? • Javascript • Kilian Valkhof [...]
[...] See the demo / Visit Cufón [...]
[...] Cufón vs. Typeface.js, which one is better? • Javascript • Kilian Valkhof Cufón and Typeface.js are both methods to show text in custom fonts (like sIFR), are both only a couple of months old and both use canvas or VML. So what’s the difference? And which one is better? (tags: webdesign javascript webdev fonts typography) [...]
Hey Tad, as long as the pixel fonts are in the supported formats (ttf for both, or otf for cufon) you should be fine.
Andrew, Thanks! That would be a problem, yes. I compared the size of the version that you download from the sites. cufon offers a compressed download, typeface doesn’t. I thought it had more merit to compare the downloadable version.
Tyk, Interesting, I will update the article accordingly :)
Great article! I’ve used Cufón in a project of mine but I’ve never heard about Typeface.js. Thaks a lot!
Awesome side-by-side comparision. First read about Cufón on Cameron Moll’s blog, but this article was actually more helpful for me.
Kilian, about tad’s question on the pixel fonts… well, in real browsers like Firefox, Opera, Safari, etc, it works very well. On the other side, in Internet Explorer, the VML renderization is very poor and it doesn’t look so good – even with anti-aliasing turned off.
[...] http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/ [...]
met typeface.js lijken floats niet meer te werken in IE6.
Zie http://www.pinknoise.nl
to make typeface.js work in IE 8 use:
TaDaaa
[...] sets d’icones bien jolies Cufon vs Typeface, le match (pas de vainqueur, TypeFace est plus CSS friendly et plus simple, Cufon … 40 ressources designs à explorer [...]
[...] http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/ [...]
I personally prefer Cufon, but you did bring up one very important point.
Amen to that!
[...] La tecnica, implementata da Simo Kinnunen, utilizzo lo stesso sistema di vettorializzazione del testo utilizzata da typeface.js, con cui condivide anche pregi e difetti. Per un analisi dettagliata delle differenze tra le due tecniche e per un confronto tra di esse si vede l’interessante post di Kilian Valkhof dal titolo Cufón vs. Typeface.js, which one is better? [...]
Hey great article, in my comparison i found Cufon to be the best, Typeface didn’t really like the kerning on my custom font.
However I think the text is selectable on both solutions, only its blind in that you can’t see what you are selecting, try it out.
http://thatguynamedandy.com/blog/text-replacement-comparison
I’ve had a lot of trouble with typeface when it came to it being pixel-accurate cross-browser.
I had not idea about Cufon, but it definitely seems worth a try.
Has anyone test both methods with a screen reader? I’m using Firefox Fangs emulator and I am having problems getting Cufon replaced text to read? Has anyone else had the same problem?
I found out through a search that this problem has been solved.
http://groups.google.com/group/cufon/browse_thread/thread/6e5140d12918bb35
Also, when I switched off Javascript in Firefox and then used Fang emulator, it was able to pick up the missing text. Go figure.
[...] Cufon vs. Typeface.js, which one is better? » [...]
[...] Cufon vs. Typeface.js, which one is better? » [...]
[...] Cufon vs. Typeface.js, which one is better? » [...]
[...] Cufon vs. Typeface.js, which one is better? » [...]
I’m interested in this technique vs. sIFR. I did want to add an additional pro/con for these items, however. It would be important to note that with Cufon your output becomes redundant upon parsing when CSS is disabled. For text browsers or mobile devices this option appears to be ineffective. Although, with some additional properties in CSS you could probably correct this output pretty easily.
Upon further inspection, it is encouraging to know that it’s client-side issue (my browser interpretation most likely) so therefore HTML output remains intact and shouldn’t impact search engine spidering.
I like both of these very much; however, this makes it even more difficult to weigh but incompatibility with IE 8 is a no-go for Typeface.js I think.
I wonder how these would handle em values vs. body { font-size: 100%; } in order to resize based on user’s preferred browser font settings.
So many things to try, so little time available. Anyone interested in collaborating?
[...] skrypt o nazwie Cufon http://cufon.shoqolate.com i wydaje się być nieco lepszy. Na stronie http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/ znajduje się porównanie tych skryptów i widać, że Cufon obsługuje Google Chrome oraz IE 8, [...]
I tried typeface yesterday and everything worked fine.
There are only 2 disturbing points: the missing support for Opera (only works in opera 10 beta; for me it worked fine in IE8 and Google Chrome too) and the filesize of the js if you convert a .ttf with chinese or japanese characters (filesize beyond 5MB).
I converted the same .ttf file with cufon and got a file with “only” 2MB in size,
but in difference to typeface, it is not possible to choose only one of the different dialects.
This post partially inspired me and colleagues to create TypeSelect (http://www.typeselect.org), which hopes to address the issue with text selectability. It leverages Typeface.js mostly because it was just easier to access and modify Typeface.js’s rendering functions. Would love to get some feedback and some help in developing more robust subsequent versions.
[...] Has spacing issues, according to some people [...]
Web-fontit, @font-face sekä erilaiset fontin korvaus menetelmät vertailussa…
Tässä artikkelissa vertailen erilaisia fontin korvaus -menetelmiä, joilla webissä saadaan mikä tahansa fontti käyttöön. @font-face tuen yleistyminen selaimissa tuo mukanaan ominaisuuden, jolla erikoisten fonttien käyttäminen helpottuu. Kuitenkin niin k…
[...] http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/ [...]
Personally for now I prefer cufon, filesizes of fonts are nice and small, especially when compressed. Shame you cant make the line-height below 1.2 when text spans across multiple lines though.
There will soon be a new competitor – http://typekit.com/ which is due to be released soon and works using @font-face, not sure if that’s a good thing or not though.
[...] Has spacing issues, according to some people [...]
[...] Cufón vs. Typeface.js, which one is better? [...]
Hey, any help for mac users with converting the FFIL files to .ttf ?
What to do…
There is one important test you didn’t mention.
Check the comparison demo page you made with CSS disabled. Cufon part of the page is horrible, every word appears twice, while typeface part is clean.
This is a very important issue in my opinion.
>> matteo,
I checked this on http://typeface.neocracy.org/fonts.html and it doubles the words there as well.
Well, if selectable text is the identifying factor for the “winner” then that goes to Typeface.js because the newest version now supports directly selectable text. But you can select text on a Cufon page as well, you simply have to do CTRL+A and it places it in the clipboard and can be pasted into any document. For the web novice Cufon is the easiest to use because it doesn’t require any knowledge of JS.
[...] Has spacing issues, according to some people [...]
I think the fact that fontface doesn’t work in IE 8 is a major reason to choose Cufón.
[...] Cufón Vs. Typeface.Js, Which One Is Better? [...]
I added a third column to your test page, in order to compare with the output of @font-face.
The result (on Firefox 3.5) is surprising as @font-face is
– somewhere in between the Cúfon (1.09) and the TypeFace.js (1.13) renderings
– so crisp and shows by comparison how blurry are Cúfon and TypeFace.js
While I’m all for using different fonts on the web, you have to ask yourself if it is worth the extra effort to do this?
Neither of these methods render text that well. It looks blurry (Firefox 3.5). Also, have you tried disabling CSS? You get a duplicate of EVERY word rendered with this. Not good for some situations.
Also, like you say, you can’t select the text…that’s a bad thing.
I hate flash, but SIFR does do a good job for this at this time of writing.
Another method I use is the plain old IMG tag. Yup. Google indexes image ALT text quite well too so there should be no SEO worries so long as you adhere to the correct methods.
Even if you want to make rendering images as an alternative to text easier, you can simply create a server-side function that takes the text as an argument and outputs an image.
E.g
Hopefully CSS3 will do away with this anyway at some point.
…ok, it didn’t render my example. Can your comments not simply escape angle brackets into their character entities instead of simply taking the whole thing out??! Seems like it should be a pretty standard feature on a website dedicated to web design.
Seriously, who’s disabling CSS besides developers? Accessible readers maybe, but they usually have JS disabled anyway so they won’t double up anyway.
Something I learned last night (London Web Standards talk) was that typeface respects ligatures (where 2 letters join together) – which is a bonus for correct display of the font you want to use. That’s got to be a plus for typeface.js
It’s worth noting that Cufon has an
autoDetectoption that makes using it a breeze.Cufón.replace('h1, h2, h3, h4, h5', { autoDetect: true });This will automatically Cufon-ize all headings based on the
font-familyyou specify in your CSS. Only those headings with theirfont-familyset to a known Cufon font – will be replaced.Only downside is, that
autoDetectdoesn’t work in Opera – so that no replacement takes place – which IMO is a nice-enough fallback.Hi guys!
If you need easily implement Cufon into your WordPress themes I wrote a plugin All-In-One Cufon http://tomsramek.com/plugins/all-in-one-cufon/
[...] Typography for the web – NY Web Standards Meetup Cufon vs sIFR vs FLIR Cufon vs Typeface.js – Which one is better? [...]
great article,
but I do wonder about the rights issue of converting commercial font and packing them on one`s server…
say I owe font x from adobe, does that give me the right to convert it on put on web server? my guess probably not :(
I guess for now one should stick to free fonts
Err I guess I should read the rights infos on cufon website first :)
[...] http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-bet…; [...]
[...] статьи: Cufon vs. Typeface.js, which one is better? AKPC_IDS += "810,"; Понравилась статья? Добавь в закладки или [...]
[...] Para una comparativa exhaustiva entre los dos sistemas, recomiendo la lectura de Kilian Walkhof "Cufón Vs. Typeface.Js, Which One Is Better?" donde entra en detalles, e incluso tiene una comparativa de renderización entre typeface.js y [...]
[...] http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/ posted under Fonts [...]
hi,
i personally think CUFON is the best.
http://www.mossawir.net
i used in my site.
i like CUFON too!
used it for dynamic Feature Rotator and Specials on home page for a travel agency site (http://shipsandtripstravel.com) and multiple fonts on their testimonials page (http://shipsandtripstravel.com/about/testimonials.html)
cool stuff!
Nice article! I used only Cufon before and based on this will not change it :) Basically both works well, but in my opinion we should avoid this kind of “hack” if it’s possible because of (full) compatibility and speed.
[...] tra loro (su kilianvalkhof.com un tabella comparativa), Cufon e Typeface sfruttano javascript e il tag canvas, non richiedono [...]
Your response?
If you post code examples, make sure to escape your HTML.