So you're concerned with SEO, but have a really nice font / image you want to use for your headings... No problem.

I can't remember where I read / learnt this from, but I use it whenever I have a client insisting that I use the fancy looking heading that a graphic designer has used in a mock up design. Also the good thing about this is if a person is browsing with images off but CSS on the heading text will still show.

The main trick of this CSS is that it leaves the text on the page, and just places an image over the top.

First we'll create a basic HTML page and add an H1 heading and a paragraph of padding text. But part the trick is to add an empty span before the text inside the H1 as shown below

<h1><span></span>This is a main heading</h1>
<p>This is a paragraph of text - Hello</p>

I already have an image (Shown below) that I am going to use for the H1. All I need to do is make sure I know the dimensions of it as I am going to use them in the CSS file for h1 (Shown in the code below)

The Heading Image

h1 {
width:400px;
height:60px;
position:relative;
font-size:100%;
}
h1 span {
background-image:url(/img/TheHeadingImage.gif);
background-repeat:no-repeat;
position:absolute;
width:100%;
height:100%;
}

I have created a demo for you to see it working - or you can download the code and image

As you can see its pretty simple, and it just positions the image over the text ... I also set a font size to the heading so if the page text is enlarged it doesn't just pop out the bottom or side of the image. You can do this with any heading, but it does start being a pain in IE6 if you try and do this for a heading that's a link - As when you hover it goes to the server and reloads the image causing a flicker (I hate IE6!).