Introduction

Web pages make use of the fonts installed on the user's computer. Since we can't know for sure what fonts a given user may have, it is common practice to use only 'common' fonts for Web design, fonts that come standard on most personal computers, such as Helvetica, Arial, and Times. But this can be quite limiting, especially for designers who like to use new, unusual or funky fonts, or companies that use a particular font as part of their branding. The solution historically has been to use graphics—a picture of the text set in the chosen font—in place of the html text. But this can cause big problems. If body copy is placed on a page as an image, it is very difficult to edit or change in any way. Even more problematic, since it is not really text, it can not be copied and pasted, nor can it be read by text readers (like those used by the visually impaired). And if the site is viewed on a non-graphical browser, the text will be invisible.

A better solution is to use an image replacement method. The text (usually a heading) is placed on the page using standard markup (heading tags, for example). Then CSS is used to hide the text while simultaneously displaying the text graphic as a background image. However, these methods have proved to be problematic as well. Here are several variations on this theme. You can download this graphic to try them out.

Basic Image Replacement (Fahrner method)

Todd Fahrner's method was one of the first to gain popularity. It simply applies the graphic as a background to the text element, then uses a <span> tag combined with a display:none style to hide the element. Here's a typical markup:

<h1><span>Heading</span></h1>

And now the CSS:

h1 {
    background: url(graphicHeading1.png) no-repeat;
    width: 225px;
    height: 35px;  
}  

span {
   display:none;  
}

Of course, the name of the file, width and height are are based on my sample; you'll have to alter them to match your own graphics. The main problem with this method is the display:none style property; many screen readers completely ignore elements set not to display, making this code inaccessible.

Left Margin Method

This method is identical to the one above except instead of setting the span to display:none; the left margin is given a value of -999em:

h1 {
    background: url(graphicHeading1.png) no-repeat;
    width: 225px;
    height: 35px;  
}  

span {
    margin-left:-999em; 
}

This moves the element off-screen—waaaaaaaaay off-screen. This solves the accessibility problem, but still leaves us with the extra <span> tags.

The Phark Method

Mike Rundle of www.phark.net developed this method. It is very similar to the method above, but instead of using display:none, it uses text-indent. But it has the added benefit of eliminating the need for the extra <span> tags. Here's the new markup: <h1>Heading</h1>

And the adjusted CSS:

h1 {
    background: url(graphicHeading1.png) no-repeat;
    width: 225px;
    height: 35px;
    text-indent: -999em;  
}

The one flaw with this method, and also one that plagues all of the previous methods, is what happens to a user that has CSS on, but images turned off: nothing appears (text nor image). Granted, this is an unlikely scenario, but it is feasible. Some surfers will disable images to speed-up downloads; those same surfers may opt to keep CSS running for proper text formatting.

Gilder/Levin method

Tom Gilder and Levin Alexander developed a method that guarantees that the text will appear by layering the image on top of the text. Now if either images or CSS are turned off, the text underneath will be visible. But we need to add a set of <span> tags again:

<h1><span></span>Heading</h1>

Note that this time the <span> tags don't wrap around the heading; rather an empty element is created within the heading, next to the text. Here's the CSS:

h1 {
     width: 225px;
     height: 35px;
     position: relative;
     font-size:90%
}

h1 span {
     background: url(graphicHeading1.png) no-repeat;
     position: absolute;
     width: 100%;
     height: 100%;
}

The image is attached to the <span>, and using positioning it floats above the heading text. In order for this to work, however, the graphic can not have a transparent background, lest the text underneath show through. Another diadvantage is the use of extra span tags; markup purists tend to cringe at such additions. One other note—I added the font-size line to lesson the chance that the heading would be wider than 225px, the size of the graphic. This will keep it safely tucked-under the image.