Images to Replace Text

Web safe fonts are a huge limitation on web designers. With only a hand full of fonts to choose from, designers are disarmed of one of their most valuable tools, typography. Many designers/developers (myself included) try to walk around this issue by using images of typography instead of “live” text (text that is actually written in HTML). The catch here is of course that text displayed as an image is not search-able by engines like Google. Sure if you put an image in as an <img> tag you could set the alt attribute thus making it visible by Google, but it does not have the same efficacy. For example sticking the word phrase “community involvement” into a <h1> tag will have more SEO importance then sticking the same phrase into an <img> tag with the alt attribute of “community involvement”, even if that <img> tag is inside of an <h1> tag.

So of course you can see the conundrum here. This of course has not stopped savvy developers from discovering interesting work-arounds. In this post I am going to go over several of these work arounds and their pros/cons. There are many of these out there, the following methods are just a few that are widely recognized.

Fahrner Image Replacement (FIR) Method: This method, first published by Doug Bowman works quite well, but the “live text” still remains unreadable by some screen readers and google will not read the content. Thus this is a less advisable method. The code is as follows:

<h3 id="header"><span> Header Text/></h3>

#header span {
    visibility: invisible;
}

OR

#header span {
    display: none;
}

Phark Method: Made famous by Mike Rundle, this method is preferable to the FIR method, yet still should images be disabled, you will not see any of your content visually. Here is the code for the Phark method:

<h3 id="header">Header Text</h3>

#header {
    text-indent: -5000px;
}

Leahy/Longridge Image Replacement (LIR) Method: Simultaneously publicized by Leahy and Longridge, this method again is better then the FIR method, but much like the Phark method is rendered unhelpful should the viewer have images disabled.

<h3 id="header">Header Text</h3>

#header {
    padding-top: image's height;
    overflow: hidden;
    height: 0px;
    background-image: url(image path);
    background-repeat: no-repeat;
}

Shea Method: First published by David Shea, this method is far better then the other three methods. The type is clearly present and readable by all browsers/devices and should CSS or images be disabled the content will still be visible. The only problem here is that the images can not have transparency (or you will see the content beneath…).

<h3 id="header"><span></span>Header Text</h3>

#header {
    position: relative;
}

#header span{
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(image url);
    display: block;
    width: 100%;
    height: image height;
}

Of course these techniques could apply to sprites or static images (though some slight tweaking of the code would be needed. I hope this helps! Happy coding :-)

Tags: CSS, HTML, Tricks of the Trade, Tutorials, Web Design, Web Dev, Web Development, What's Hot

This entry was posted on Tuesday, June 22nd, 2010 at 5:32 pm and is filed under Tutorials, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.