Nobody likes limitations, especially on the web. Nine years ago when I was just starting out on the web design scene, the truth hit me and it hit me hard. After designing a few personal sites using a non web safe font, I realized that although it looked great on my screen, it looked absolutely horrible on everyone else’s. Surely, there had to be a way.
Fast forward to a few years later, I began to use images as heading text. This was the ultimate solution to my font crisis. Unfortunately, I didn’t realize the SEO benefit of text-only headings. Therefore, my image solution would have to go and I would have to search for another way.
Typically, header text is defined by the H1 tag. The H1 basically is a brief summary of what the content of the page is about. Search engines use this information when ranking web sites.
Let’s take a look at a common H1 tag:
After using some CSS to style the text, the output can look like this:
But what if we wanted to use a different font to jazz up that heading? We would modify our HTML like so:
Next we create an image to replace our header text. Make sure that the text in the image is the same as your H1 tag, since this helps with accessibility.
And finally, we apply our CSS:
This code will position our header image above our header text. When CSS is disabled the original header text will be displayed accordingly.
Here is our result:
Okay, so this works out great. But let’s say that you have dozens of pages on your web site. That’s a lot of images and different CSS classes to create. What if the header text needs to be changed? That would take more time and effort. Thankfully, there is sIFR.
sIFR, or Scalable Inman Flash Replacement, is a way to replace text on a web page with richer typography. sIFR uses Javascript, CSS and Flash to create a nicely accessible and search-engine friendly text replacement. sIFR will find the element of the page you wish to convert to a nicer font face and change it automatically. There is no need to create hundreds of image files or create many CSS classes.
You may notice that the headings on this blog have a non web-safe font. This is thanks to sIFR. Google has recently announced that sIFR is SEO friendly and ethical for their crawlers. Since Googlebot cannot fully see and understand flash, they will only see the original HTML H1 tag.
So there you have it, two ways to replace header text on a web page. Thanks to CSS and sIFR, header replacement is no longer limited. Be sure to be ethical and not abuse this information which may lead to getting banned from the search engines. Enjoy!