Web standards need not be ugly

Who said creating type with images was bad? I say, fooey!

As I’ve been nursing a wicked sinus infection for the past week — often flat on my back in bed, trying to get healthy again for SXSW — I haven’t been able to get much client work done. As a result, I’ve had extra time to work through a few ideas and experiments I wouldn’t have finished otherwise. The frame spacing test from earlier this week was one of them.

If you’re viewing the full-blown styled version of this site: see the large blue text on the light gray background toward the top of this page? It probably says “Recent Log Entries“, or “Log Archive by …“. Ever noticed these page titles are <h1>‘s (Heading 1), and that no images appear in the markup for them? View source or toggle stylesheets off with one of Tantek’s favelets. You’ll see the titles are actually pure HTML text.

Today, I push out a new CSS tutorial titled, Using Background-Image to Replace Text. I cover the method employed here on stopdesign for each of the page titles. It assumes a base-level understanding of CSS, but not much more. Quoting the last paragraph from the tutorial: With responsible use and careful testing, this method can be used reliably to enhance the presentation of type on the Web, while preserving accessibility for image-exclusive browsing and indexing applications.

If you find the tutorial useful, let me know. And I’ll make sure to churn out a few more as I have time (or when I get sick again).