design3

126
The Principles of Beautiful Web Design
to consider text image replacement. Note that this doesn't mean just tossing an tag with your
text straight into your HTML. Using an image tag to display text is neither accessible nor search
engine friendly—because any visitors who’re unable to see the image will be left in the dark. This
includes search engine spiders, of course.
Instead, you’ll want to mark up your text as actual text. Take the example of the Barstow website 9 ,
shown in Figure 4.4. It features rounded vintage text, which looks great and stands out against all
of the straight and grid-based typography on the web. If I wanted to make the logo and text accessible,
I would make it an HTML element and give it a class of logo-active.
To replace that with an image, I’d then use CSS to set the width and height of the link to the size
of my image, and set the display property to block, since links are inline by default. Then, I typically
use what’s known as the Phark Method of image replacement. This involves setting my image as
the background of the element, and then adding a negative text-indent value high enough to move
my text content out of the block (and off the screen!). The CSS would look like this:
.logo-active {
display:block;
width:300px;
height:150px;
background:url(/images/clowns.png);
text-indent:-9999px;
}
Figure 4.4. The Barstow website
9 http://www.ridebarstow.com/