Headings: Balancing Design and Markup
Posted on Friday March 17th, 2006
Most of us have run into this problem before. You want to have rich typography in your design, but you also want to have it degrade to simple textual information for various outlets. I've gathered a few techniques that come into play when that plain black-on-white <h2> just isn't good enough.
Fahrner Image Replacement (FIR)
Popularized by Jeffrey Zeldman in Designing with Web Standards, this method is very widely used today. I use them on my site for the vertical section heading on the right side. The code is not 100% semantic markup, but it's close enough that no one should complain. You put a <span> tag inside your heading tag, and using two CSS rules, the <span> (which includes the text) is hidden from visual browsers and the image is displayed as a background of the heading tag itself.
It is completely transparent to search engines and non-CSS browsers since it is simple text. It scores higher than the alt text of an image placed inside an <hX>. No programming or extra libraries are needed for this effect to function, only CSS and images. It is instantaneous with no more lag than any other image being downloaded on the page. The usability problems are that you cannot highlight the words, and you have to be careful how you hide that <span>, as using display: none or visibility: hidden will hide the text from most screen readers. Using extreme margin or positioning settings is a better (although hackish) solution. Read about the many ways of using FIR.
PHP Dynamic Text Replacement
Scalable Inman Flash Replacement (sIFR)
sIFR is a programming library licensed under the LGPL, giving free access to anyone. You can download it at mikeindustries.com ¤