CSS font replacement technique

Many of us would like to have headers with nice custom fonts on our website. For instance, logo which we like to have in an attractive graphics. But this stuff can be done only with the help of <img> tag, not with the regular text.

The proper HTML tag to use for headers is the header tag (e.g. <h1>, <h2>, etc). This is best for accessibility as well as SEO. Instead of using an image, we will think that having a text based logo will be much preferable for more SEO point of view even though we have an alt tag to the image. But text might not give you an attractive look. So how to use css font replacement technique to use both text as well as image in logo.

You may also be aware that CSS allows us to place background images on elements. Also text indent to align the text. We can use a proper header tag, but also use an image.
We need to somehow hide the text so that only the image is visible. Here it goes...

HTML:
<h1 class="logo">
Webdevelopertut
</h1>

CSS:
h1.logo {
width: 200px; height: 175px;
background: url("images/logo.jpg");
text-indent: -9999px;
}

Basically this technique creates the text goes way off the screen to the left. The text is being left-justified and cannot be seen. instead image is placed in the top left of this box.

When both css and image is on or off this method will get pass and fails when css is on and image is off. Most of them are now following this technique.