Heading image replacement - XHTML & CSS
Written by Python - Wednesday 28th of May 2008
Perfect
Quite a common issue with web development is not being able to use the exact font you want. It's not a problem with images but when it comes down to keeping your site semantically correct and retaining as much of your sites search engine 'likeability' it can cause a bit of a concern. The purpose of this rather short tutorial is to demonstrate how you can make use of images within your headings so that they look great but also keep hold of those important keywords.
Table of contents
1. The problem
On a typical, home users computer they may have anywhere between 10 and 1,000 different fonts installed. Regardless of this the chances are that the majority of the people who will visit your web site will not have a particular font and will therefore not see it as you would have liked.
Let's consider the font 'Daidoh Remix' which is freely available for download here. If you wanted to use this particular font in your web sites pages headings the normal way to go about it would be to use CSS to set the font. If however someone then visited your site who didn't have that font it would not display correctly and may use their browsers default font instead. This can be rather annoying especially when you are trying to go for a specififc style or look.
The solution to this problem is actually very, very simple.
Take a look at the following code snippet.
<h1>Coding tutorials</h1>
As you can see it is a normal heading 1 tag with the text 'Coding tutorials'. As mentioned above the users browser may use it's default font if it does not have the one your trying to use which means although it might look great on your system it will look terrible on other peoples. It may end up looking something like this.
If however using our image replacement trick we can make it look like this and without losing any valuable key words.
2. The solution
In order to do this we first need to create the image. To do this open up your favourite graphics editing software (e.g. Photoshop) and then simply add whatever text you like using the font of your choice. In my case I have used the text 'Coding tutorials' with the font Daidoh. I saved my image as 'heading-Coding_tutorials.png'.
Take a look at this XHTML markup.
<h1><span>Coding tutorials</span></h1>
We have just inserted a span into our heading tag and then moved the text inside that. Now with a little bit of CSS we can do the replacement.
h1
{
background-image: url('heading-Coding_tutorials.png');
background-repeat: no-repeat;
width: 400px;
height: 40px;
}
h1 span
{
display: none;
}
What we have done above is again very simple. By giving the h1 a background image we can make it look as if it is just using our font as it normally would. Then by hiding the span it removes the initial text.
Because search engine spiders do not use CSS when accessing site pages it means that these rules will not be applied when they visit.
And that's all that's to it. Enjoy!
You must be a registered user to add your comments.
10-7-2008 Thanks Python that's a good idea. I do something similar to this for accessibility reasons but it also helps with SEO. I will wrap my images in header tags making sure I use alt text. By doing that, people who have images turned off will still get the point, and my alt text gets treated a little better by the search engines :)