I've used quite a few image replacement techniques in web design in the past to create better typography for the web. But recently I've ran into a technique improved by Scott Kellum that proved to be effective as well as enhancing the performance of the site.

If you're a web designer, you've probably heard of Fahrner Image Replacement technique. It's essentially using CSS text-indent property and set it to a very larger negative number such as -9999px so the text isn't visible to users.

The technique is known for having a performance drawback since the browser has to draw the screen out to the measurement defined in the CSS. Jeff Zeldman recently published an improved technique in his post about this fix based on Scott Kellum's refactor code as follows:

.hide-text {
         text-indent: 100%;
         white-space: nowrap;
         overflow: hidden; }

So use this in your next web design project to eliminate performance drawback in the CSS.

Wanna learn more about different CSS image replacement techniques?
Chris Coyer at CSS-Tricks published a pretty good list here.