JavaScript Offers Type Designers Better Choices Than Flash
Web typography sucks. In order to use a font on the web, the actual font file must exist on the user’s computer. Given the variations between operating systems and web browsers, designers end up with about five or six fonts that are universal enough to use in web design.
There are some workarounds — some sites use images to render headlines, but doing so is awkward and ruins basic functionality like copy and paste. The best alternative so far to the standard six fonts of web design is a technique named Scalable Inman Flash Replacement, or sIFR (check out our overview of sIFR). But Flash replacement for fonts is often awkward and difficult to use, and causes page loads to slow down. It also requires users to have the Flash plugin installed.
Now there’s a new sIFR alternative on the block — Cuf��n.
Cuf��n uses uses the HTML5 canvas element (or VML in the case of Internet Explorer) to render fonts using JavaScript. The result is a bit like sIFR, where designers get to use elegant, pretty type on the web, but positioning type on the page is considerably easier than with sIFR.
The big win is that there’s no need for Flash. By using HTML 5, Cuf��n provides an alternative that’s friendlier to open web standards. And, along with similar methods for embedding video and audio, it’s one of the technologies leading the way to a web experience free of proprietary plug-ins.
Of course Cuf��n isn’t the first JavaScript project to venture into the font waters, we’ve previously pointed out the typeface.js library and others. So what’s the difference? Well the team behind Cuf��n claims that using VML instead of SVG (which typeface.js uses) is much faster.
Ultimately, the CSS @font-face declaration will likely be a much better web typography solution — all you’ll need to do is point to a regular TrueType or OpenType font file somewhere on your web server if you want to display non-standard type. But so far, only Safari supports @font-face. Other browsers are playing catch-up, with Firefox and Opera close behind. In the mean time, Cuf��n adds another option to your bag of web typography tricks.
See Also:
