Since my last post (about typography... which conveniently is also my last post), I've learned a few things:
- I need an upgrade of Photoshop. Photoshop 7 just isn't cutting it for design. (Could I be any less subtle to the powers that be? Hint. Hint. Hint.)
- Typography is a nightmare. Finding the font that you want that fits the site, then picking one of the three afore-mentioned (obnoxious) techniques, and then going through the actual implementation of it... and then having to debug it across the browser... Right. 'Nough said.
- There has got to be a better way.
Luckily for me, you, and everyone else out there, there does seem to be a better way. It's not full proof. It's not even perhaps known of. But it does seem to fix a good 99% of my issues with type and the web, functions in all the browsers, and also is at least relatively secure. Don't quote me on the license issues for it, though, those aren't my specialty.
What is this mysterious bout of problem-solving amazement? One simple word. Cufon. Now, try to pronounce it. I think I've heard it about five different ways.
The next question, I'm sure, is what exactly is Cufon anyway? Well, that I can answer. Cufon is an implementation of javascript, SVG, and Canvas that slaps your font into place after the browser has loaded your website with an amazing amount of speed and efficiency. So... why do I like it better than image replacement, @font-face, or perhaps sIFR? Simple:
- Compatibility: Cufon works in all browsers except IE6. Since it's run by javascript, it doesn't require you to have the most recent version of flash on your site. In fact, it doesn't require flash at all (and thank god). Not every browser has implemented the use of canvas or SVG, but with javascript mixed in, every browser (except stupid old IE6) is at least able to run Cufon.
- Useability: Cufon is amazingly easy to install. Ridiculously easy in fact. Plug your font into their encoder, allow it to spit it out, and plug it in. For those of us who are CSS gurus and not developers, this means something very important: Cufon works like a breeze with CSS! For any of you who have been using sIFR to do your subbing in, and I have tried it myself so I am talking from experience, how difficult is it to actually A. Target a piece of HTML with sIFR and B. Actually then apply the correct CSS to it without tying yourself in a knot over word-spacing, line-height, and all the other joys of actually forcing your new flash text to over-write your old text in that pretty manner that you want? You know what I mean. With Cufon: Apply it, target it with javascript (Cufon.replace('h1')) and... voila! Apply your CSS as normal. No extra instructions, no obnoxious work-arounds, just put it all in and make it pretty. No stress and no grey hairs.
- Speed: Taking compatibility into consideration with this one, @font-face is fast. It plugs your text in like normal. In the browsers it works in. Image-replacement is fast enough. You have to wait for the images to load and in the meantime, no text appears at all. sIFR is the slowest piece of $@%! on the planet. Luckily for us, Cufon pops up (leaving your regular text there until it does, styled with the CSS as normal so it looks nice) as soon as your javascript kicks in. Which is pretty darn fast in all the modern browsers.
- Safety: As I said, I can't swear by the legality of it, but Cufon does imbed the font you upload into a new javascript file for you and requests that you specifically apply it to your domain. People can probably steal all the code and put it in their website, but they won't be able to download it for use at least.
From a designer's standpoint, 2 is probably the most important to me. I cut down on applying beautiful fonts to a website in under half the time it would have taken me using any of the other programs. And because I can't swear to be the smartest cookie in the jar, Cufon has a great set of instructions that pretty much spell out how to use it on your site. Add to that, it's compatible with most of the major javascript libraries, including jquery (my favorite) and prototype. Kyle gives a few more awesome reasons as to why he, as a devigner (developer + designer) loves it.
If nothing else, give it a shot. You might find that it blows you right out of the water.
Cross-Posted from Mindfly's Blog