Typeface.js is one of a few different canvas text/header generators currently available (the others we’ll cover later). When pretty, non-standard fons are used as headers on a site, a web developer normally only has a choice of two options:
- Make the header an image – which has the downside of a new image being required for each and every new header.
- Make the header in sIFR – a flash text converter which works very well, but does not scale when the user increases their browser text size.
The idea of Typeface.js is to replace your headers with a canvas text header instead. Fonts are saved as SVG co-ordinates and rendered dynamically. If the user changes their text size, Typeface’s text changes size too.
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
Lots of work is going on to constantly improve Typeface, and it currently supports Firefox 1.5+, Safari 2+, and Internet Explorer 6+ – degrading to standard header text for other browsers.
One of the biggest problems facing the canvas-based header programs at the moment involves font licencing. Unlike sIFR or image based headers, canvas-based header fonts are available for other people to steal. See the article Fonts and the Law on FontEmbedding.com for more information. Some font companies offer a seperate or extended licence for using fonts for this purpose. Please consult your font producer to find out if this applies to you.