Last week I’ve came across with a new ‘method for image replacement (e.g. on hyperlinks), wich I’ve tested successfully in my latest project, and thus I now recommend its usage…

So far the most common method, was to use the -9999px left-margin, but this had a few drawbacks, since it had to “draw” a huge 9999px box offscreen.
This new “recipe” is cleaner and dramatically improves performance when compared to the old -9999px method.

So this is the code to use:

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

This method was discovered, apparently, by Scott Kellum, design director at Treesaver, and published in www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ where you can read some more about it.