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. [more]
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!).