HOWTO – Use rich fonts in your web design

Only Two Cross-Browser Web Fonts
If you want to choose fonts that will look similar across most modern browsers you have two choices: Georgia and Verdana. Yeah, there are a few other fonts, such as Times, Arial, Helvetica, etc., that are available on all platforms, but they tend to look really nice on one platform and really crappy in another. Or they look nice in both, but the kerning or the letter height will be different for the exact same font size.

The web is a boring, two-font world.

Here’s the thing though. Georgia and Verdana are really decent screen fonts. For large blocks of body copy, they provide you with a very respectable serif and sans-serif font option. When it comes to titles or navigational elements, however, you often want something that will stand out from the rest of the copy on your page.

Fonts in GIFs: The Old Way
The typical solution is to create your titles and nav buttons in Photoshop, then cut GIF images for placement in the web page. This lets you use any font face you desire, ensures that things look exactly the same in all browsers, and takes an extraordinary amount of extra effort.

If you want to put slick looking titles on your blog posts, this method will probably have you in a big white coat with extra long sleeves before a month is up. Even worse—hey, some of us look good in white—if you’re using images for navigation or titles, the text isn’t selectable, it isn’t search friendly, and it’s probably a nuisance for people who use screen readers to navigate your site.

sIFR: The Better Way
sIFR is a little Flash/CSS/Javascript hack created by Shaun Inman and maintained by Mike Davidson and Mark Wubben. It uses Flash’s font-embedding and rendering capabilities to place whatever typography you like in your site. What makes it different from the GIF method is that you develop your site with plain-ol’ HTML, apply normal CSS classes, and if your browser supports Javascript and Flash, sIFR replaces the text on page-load with the desired typeface.

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

1. A normal (X)HTML page is loaded into the browser.
2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

Essentially, you can have the titles on your site render in any font you like by just adding a few lines of Javascript to the page template. Search engines and screen readers will still see normal HTML text, you can still use traditional fonts in your CSS classes so that it degrades gracefully on unsupported browsers, and the other 95% of browsers out there will render your site exactly as you designed it, regardless of platform. Oh, and you can select your fancy text too.

Seriously? Flash can used to improve web design _and_ promote web standards, accessibility, and indexability… This has been available for a couple of years, but I’m still left scratching my head.

Links:
Rich Accessible Typography for the Masses – Link
Download sIFR – Link
sIFR Wiki Documentation – Link
sIFR Example Page – Link