What’s the problem?

Unfortunately, fonts are one area of web design that haven’t advanced as quickly as we web developers would have hoped. We’re still stuck with the same old limited set of “web safe” fonts; to the uninitiated, that’s the small set of standard fonts that are guaranteed to render virtually the same across most systems, regardless of browser or operating system.

There are currently a couple of different methods for using non-standard fonts including the much-hyped @font-face but as much as I love cutting edge technology until these methods are supported by all the major browsers, I don’t see a use for them in my day to day development work.

So for main body text, we’re stuck with good old Arial, Verdana, Georgia and co. but that doesn’t mean we can’t flex our creative muscle with other elements of typography. Using interesting fonts for headings and short introductory paragraphs is the perfect way to inject a bit of pizzazz into your designs.

Using images for headings

You can create your gif images in your favourite image editor using the font of your choice and simply include them in your HTML but there’s a problem with that approach: search engines and screen readers can’t read the contents of images. The “alt” attribute goes some way to alleviating the problem but it’s not perfect, there are character limits to adhere to if you want to ensure your HTML code remains valid.

Furthermore, the heading tags (<h1>, <h2> etc.) are arguably some of the most important HTML tags in terms of SEO and by their very definition should contain textual content and not images.

CSS to the rescue

This is where the magic of CSS and a little bit of cunning combine to save the day.

Assuming you’ve already created a heading image, (in this example it’s 120px by 30px in size and saved it to a folder called /images) lets have a look at the code to insert the heading:

This is the main heading!

The trick is in the “text-indent” property of -9999px which effectively hides the text contained with the <h1> somewhere way off screen without affecting the position of the <h1> itself. The contents of the <h1> are then replaced with the header image by setting it as the background of the <h1> element. With CSS switched off, the normal text displays. Screen readers and search engines alike ignore the CSS and simply read the textual content of the <h1>.

Further reading

• Mezzoblue’s article on image replacement details a number of very similar ways to achieve the same effect as above, each with their own pros and cons.
• Flash based solution, sIFR.
• javascript based solution, Cufon.
• Javascript based solution, typeface.js.