CSS Image replacement

One question that arises in most SEO cases is how to have clean, text based <h1> tags, and still make use of a specific font, outside of the standard fonts available.
There are, of course, more than one solution to this question, for example using sIFR. But in this post I will explain how to do this using nothing but CSS.
The result we want looks like this (when using an image):
 

 
This is easily implemented with the following html:

<h1 id="niceHeadline"><span>Nice headline</span></h1>

And the following CSS:

h1#niceHeadline span{display:none;}

h1#niceHeadline{
width:251px;
height:41px;
background: url('images/nice-headline.jpg');
}
So the only thing shown in the html is a h1 tag with an id attribute and a span tag within it. But the result looks just like the image above. It is, however, important to never use any other text in the underlying html than what is represented in the image. If you do that, you are breaking the Google Webmaster Guidlines, and could suffer penalties for that.