Beautiful Web Fonts Part 1 – The Flash Method
Posted Wednesday, January 13th, 2010 at 8:23 am by Tim (38 posts)
Beautiful fonts are one of the holy grails of Web Design. Along with CSS-based equal height columns, better support for image transparency, browsers that all display pages the same (or at the very least the death of IE6), and a vending machine stocking drinks with higher caffeine content than Mountain Dew, the ability to use any font we want in a page design would make us (mostly) very happy indeed.
There is something to be said for sticking with a fairly limited set of fonts for the main content of your site. After all, people actually have to read what we write and our usual set of fonts are nicely readable for the most part. But when it comes to headlines we may want to use something a bit more elegant than Arial, Verdana, Helvetica, Times New Roman, or Georgia.
The problem, in case you don’t already know, is that when it comes to the text of a Web page that is not part of an image, you can only use fonts that you know will be installed on any computer that may browse your site. For the most part, we have limited ourselves to the list I mentioned before because we (correctly or not) want our pages to look the same to everyone who visits them. There are actually two or three times that number of fonts that have higher than a 90% install rate according to CodeStyle.com’s survey, but when you start considering different operating systems, the number quickly shrinks.
So can’t you simply make all your fonts into images? No you cannot. But that’s a talk for another time. For now, let’s just leave it at: don’t.
So what can we do?
In this post, I’ll talk about sIFR, or “Scalable Inman Flash Replacement (sIFR),” named for Shaun Inman, the pioneer of the technique.
Basically, this method relies on javascript and Flash to replace plain old HTML text with the same text in a small Flash file during the loading of the Web page in your browser. The result is very pretty, smooth, type limited only to what fonts the designer has access to.
And here’s an example:
Boring HTML font replaced with sIFR to make it lovely.
There are certainly advantages and disadvantages to this , as with any, technique.
On the plus-side, it looks very nice, and recent versions of the script have addressed some issues that made it difficult and unpredictable to use. The text is still indexable by search engines and can, in fact, still be copy/pasted like any other text on the page. Go ahead and try it. I’ll wait…
There are, as with anything, some caveats to keep in mind:
In order to accomplish this, you are adding a JavaScript file and generating a flash file for every instance on the page where you are replacing text. This increases the amount of information that the browser has to download, as well as the time the JavaScript takes to process each flash file. A side effect of this is that the headlines, or whatever text you are replacing, will probably be the last thing to appear on the page. If you refresh this page a few times, you will probably see the beautiful sIFR text is the last thing to load, and that the page sort of jumps to adjust to the size of the flash pulled in. As far as I know, there is not way around this.
Also, your site visitors must have both JavaScript enabled and Flash installed. The number of people who do not is likely small, but still something to keep in mind. Depending on your audience this may be more, or less, an issue.
While sIFR is becoming a better solution all the time, I would still be extremely cautious about whether, or how often, to use this solution. When you are messing with the actual content of a Web site tread very carefully. I know it will be very tempting to replace all your page titles with beautiful fonts but I still recommend sticking with regular HTML text in nearly every case. After all, it’s far more important that everyone visiting your page is able to read the content than that they “ooh” and “ahh” while they do.
Next, I’ll post about one of the other leading font solutions, @fontface.
