Using background-image to replace text

Please note: The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article under “Important Notes“.

This tutorial assumes a base-level knowledge of CSS, but not much more. Beyond that, it also assumes care will be taken to use these methods fairly and responsibly with well-structured markup.

Introduction

Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right? continued

Web standards need not be ugly

Who said creating type with images was bad? I say, fooey!

As I’ve been nursing a wicked sinus infection for the past week — often flat on my back in bed, trying to get healthy again for SXSW — I haven’t been able to get much client work done. As a result, I’ve had extra time to work through a few ideas and experiments I wouldn’t have finished otherwise. The frame spacing test from earlier this week was one of them. continued

Host

Stopdesign is hosted on a Virtual Private Server at Dreamhost.