Images as header, what to do?
Many designers want to use fonts for a web site that are not installed on most of the computers. More fonts are a large problem, but there are some solutions.
The first one is a replacement system. You just use h1 and h2 elements for your headers, and after the page is loaded a JavaScript will turn them into an image or a Flash file. All the images are auto-created. sIFR is the most used one in that kind. This solution is very welcome when you’re building a large web site, or a web site that changes of content very often, like blogs.
When the web site is static (the content doesn’t change often), there are two methods you can choose. But one is in my opinion very bad practice.
That bad practice is the usage of a background image, attached to the headers via CSS. It can be done via text-indent (set that to a large, negative number), or via a span element within the header element. CSS then hides the text with the simple rule display: none;.
This is bad practice, because when the user had images turned of, the user doesn’t see anything! Plus, it is not very semantic because you do show an image, aren’t you?
My way for small web sites, is to use just an image tag inside the header element. Via the alt attribute you handle the search-engines, screen readers and people with images turned off. Unfortunately, some browsers do render something weird when there is no image to display, like that red cross in Internet Explorer. I satisfied myself to hope not many people have turned images off…
So, all not very cool solutions… but better solved in this way than wait for ages for more fonts for the web.
Posted on Saturday, July 14th, 2007 in HTML, Semantics, CSS, SEO, Accessibility, Flash, Design
Comments and trackbacks are welcome.