Heading Showdown: Balancing Design and Markup
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 work predictably in a good chunk of browsers. 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
A Javascript library finds heading tags and feeds the text within to a PHP script, which returns an image with the text in a typeface you specify. No extra markup is needed, and the resulting images are sized appropriately depending on which heading tag you chose. I've noticed that the replacement can lag a bit, due to your initial web page loading fully before invoking the server-side script. Other than the lag, this method provides the same benefits and drawbacks as FIR.
The how-to is an ALA article linking to the example. The necessary libraries are linked within the article.
Scalable Inman Flash Replacement (sIFR)
sIFR is a flexible solution in that it combines the semantic markup you desire with the smooth, anti-aliased look you set out to achieve while maintaining the ability to highlight and (on page load) resize with browser text setting changes. Score. Though it is a fairly modular solution, it takes a little time to set up and you have to have the capability to edit a Macromedia Flash file. Regardless, it produces wonderful results and degrades gracefully into normal CSS-formatted text if the user doesn't have Flash or Javascript capabilities, which is in turn visible as plain text to non-CSS media and search engines. Double score.
sIFR is a programming library licensed under the LGPL, giving free access to anyone. You can download it at mikeindustries.com.
What are your favorite examples of balanced design & markup? Comment below!
