Fonts in Web Design

Choosing what font to use in web design is somewhat like going to the same restaurant every day, and there's 3-4  items to choose from. Helvetica's good, it's popular item... but you had it so many times. Arial isn't any better, tastes almost the same. Trebuchet seemed really spicy for a while, but now... you get the idea. If you want to use fonts and text on your web pages (and for usability, SEO, and accessibliity, you really should), you're stuck with a few choices. And that really hasn't changed for the past 10 years. There are a few options, however, that may help.

Option 1 – Use an image for text

This is the oldest and easiest option, but I almost never do it. Search engines can't read the text if it's an image, and that hurts both Google results and visitors trying to find things on your site. It's just lazy, when at the very least you could do Option #2.

Option 2- Phark

This is a simple CSS-based solution, and one I use all the time.

Create your headline in the font of your choice and export it as a graphic. Then assign this graphic as the background image to your text headline. Set the width and height to match the new graphic. Then set the text headline with a CSS rule, text-indent: -5000px: What this does is slide the text off the page, but the background image (graphic text) remains. The big advantage here is that people who don't use CSS (such as Google) will see the text, and index it for search results. People using screen readers hear the text headline, but don't see the graphic.

This method, by the way,  is attributed to Mike Rundle, and I thank him for creating it!

The basic CSS to use is simple. Here's a sample code for all h2 headers:

h2 {

text-indent:-5000px;
background: url (yourtextimage.gif) no-repeat; /*replace with path and image name*/
height: 50px; width: 100px; /*(or whatever your image is) */

}

Option 3- IFR (inman flash replacement)

Named for its creator, this method involves using Flash files to provide the graphic fonts, swapping out the text headlines on the page as it loads. It's well documented elsewhere, and I've never used it, but it seems clever enough to me. A variation on this (SIFR) by Mike Davidson allows for resizing text too- (that's Scalable Inman Flash Replacement).  Having text that can scale in size is an advantage I don't think any other method can match. Of course, Flash doesn't work everywhere, most famously not working on the iPhone.

Option 4- Cufon!

This is a fairly new option, for me anyway, and just may be greatest option of all. Using JavaScript and an online font generator, you can swap out text headlines with custom fonts AND still have the text be there on the page for search engines, screen readers, etc. I guess it's a bit like Option #3, only it's not Flash based. 

First you go to the online font generator, where your font of choice is converted to the proper format. Copyright reasons are why we never can embed any font we want on a page (or else people could just copy it for free). But this method lets you use your font without exposing it for download. Not sure how, you can read about it if you're curious.

So once you've created your new font file (it may take a few tries to figure all the options out), you save it to your web server. Then you embed the Javascript code on your page, which you downloaded as well. And finally, add a few rules to your HTML header, telling Cufon what headers to replace with which fonts. 

The text loads, and then is replaced by the font of your choice. If you view the page without CSS turned on, the underlying code looks a bit weird, since you see a series of images rendered between each word of text. But the HTML code only shows text, and that is what the search engines see. 

I guess the big advantage with this option is that once you've defined your rules and loaded your fonts, you can apply them to text on any page, and you don't have to export any graphics or write additional style rules for each header. 

Conclusion

While using a variety of fonts on a website has never been simple, these options make it easier, and Cufon may be the best option yet. Of course, this all still really applies to headlines, and not to long body copy. For that, we'll still be using Helvetica, Arial, and Times for now. 

• Web Design
• Web Tech