To Use Live Text or Graphic Text?

Let's take iGliss.com as an example. Should the tagline "Get your own high quality RSS feeds and be part of a community of like minded people" be implemented as live text or part of the graphic image?

In general and according to the tenets of best practices, live text is preferred. However, as in everything, there is always a tradeoff. In this tutorial, I'll try to explain what some of these are.

What it means ...

If the tagline is implemented as live text, the text is HTML text and the user is able to select the text as shown...

If the tagline is implemented as part of the graphic image, the text is not really text. It is part of the image with the rounded rectangle with the textured background.

Advantages of Live Text ...

1) Easy Maintence

If you ever need to change the text of the tag line, it can be easily changed in the HTML. If it was graphical text, you would need to go back into the graphical source file and edit the text in the graphics program and output the image. This assumes that you still have the graphic source file or remember where you have put it.

2) Search Engine Friendly

Search engines can "see" the text. Hence pages that implements live text might do slightly better at being found by search engines simply because the page contains more relevant text.

3) Accessibility Friendly

In the same manner... If search engines can "see" the text, then so can screen readers which aids the visually impaired. If it was implemented as a graphical text, your message is lost to those who have turned off images in their browsers or to those how relies on screen readers to browse the web.

Advantages of Graphic Text...

1) Ability for graphical effects.

Any text that has a drop shadow, inner glow, or other graphical effects must be implemented as an image, since HTML is not capable of such effects.

2) Greater choice of fonts.

Even if you do not use these graphical effects (such as in our example here), you still would have a greater selection of fonts to choose from. If you want your text to be in some unique fonts such as Sniff or Black Chancery to give your page the look-and-feel that you want, then you are better off going with graphical text. Since most users will not have those fonts on their system, the browser will not be able to render it and will substitute a generic font that you may not prefer.

In our example, the font for the tagline is Franklin Gothic Book. Although a lot of users will have this font on their system; it is not as common as Arial or Times New Roman. Regardless, it is perfectly acceptable to use live text in this case if we implement the best practice of specifying multiple fonts in our font-family...

Now if the user does not have "Franklin Gothic Book", the browser will use Verdana which is common enough to be of general use in websites. Plus most users will not be able to distinquish between Franklin Gothic Book and Verdana, so your look-and-feel is not sacrificed. For those users that do not have Verdana, Arial is used. If not, then Helvetica. And finally, if all else fails, the generic sans-serif font is use.

3) Easier to layout.

It is easier to position the graphical text exactly where you want it on graphic background, since you can precisely position it in your graphic editor. To position the text as live text, you will have to apply css styles as shown...

4) Greater Control of Font Appearances

In a graphical editor (the below is Fireworks)...

you have full control over the amount of anti-alias, the line spacing, character spacing, kerning, etc. This does not have much effect on standard size fonts. But when you have large 18 point text, the effect might become noticeable.

[iGliss website screen shots reprinted with permission from iGliss.com]