W3C compliant images of text

Picture the scene.. your designer brings you a website design and it looks fantastic; the colours are great, the layout is perfect and it's going to really get the company's message across. However, there is a problem, they've used a corporate font that is not part of the 'safe list'... (See here for an explanation of this: List of web safe fonts)

So what do you do? Other than bash them over the head with a big stick you can do 1 of three things:

1. Ignore their design and use an alternative web safe font
2. Use a flash image and javascript text swapper
3. Use CSS to create standards based code but keep the non-safe font intact

Standards based CSS image text replacement.

The first thing to do is to get your design and cut out the image of the text:

So you can lay up your code for the navigation, something along these lines:

Now we need to consider a way of getting the image of text above to show as an item in the navigation. In order to do this we need to add a couple of extra tags to the code and give the list item an ID reference. So the code above becomes:

You can then write some CSS code to hide the text and assign the image as a background. Something like this:

#sometext {background: url(images/image-of-txt.png) no-repeat; width:150px; height:30px; display:block;}
#sometext span {display:none;}

That should do it, you should now be able to add the other images by giving each item in the navigation an ID and using code similar to the above.

Why do it this way?

The main reason for doing it this way is that you have the option of switching styles for text only sites, so you can enable the navigation in a text form. Likewise for text readers, the navigational items would also still be legible as the text version is available inside of the tag - whereas if they were straight images of text as buttons they would be illegible for text readers - something that could contravene the DDA and PAS 78.

Hope that works for you and please send us some examples of it in practice - we'd be interested to see the results.