Text as Image
One of the major drawbacks to designing for the web is the limited amount of fonts one can use. Although you can specify any font, the fact that not every machine a viewer may be using will have any particular font limits what is practical to use. This leads us to using image as text. The main titles for this site are in a font called Boton, which is very unlikely to be installed on many machines. So, an image it shall be.
Of course, the techniques and considerations for text as image are equally valid for image as image, especially when dealing with single-bit transparency, as with GIF and PNG-8.
Text as image, or vice versa, is the way around font limitations. However, this method should be limited to, at most, titles and headlines. There are a few very good reasons for this. The first is that images are not readable, as in by screen readers, so text as image becomes inaccessible. One way to lessen the impact of this is to use the alt attribute properly, by restating the text. Another reason text as image should be limited is that it is not searchable: the words in an image are image, not text. A third reason is site overhead. An image is always larger than plain text.
Creating
Keeping the above limitations in mind, text as image is still pretty common. Creating it is pretty straightforward. These snippets can be done entirely in ImageReady (or Fireworks), and there’s not a whole lot to it.
Start with a new document. I usually start with a white background, then fill that bottom layer with the background color of the site. This will come into play in a bit.
Put in your text, using the Type tool. It will appear in the foreground color by default, but can be changed. You don’t need to be particularly careful about where it is in the document window, just make sure all the text is contained therein.
Anti-Aliasing
Anti-aliasing is a technique which uses edge pixels in an image to blend the image, in this case the edges of the text, into the background. This creates smoother-looking text, particularly curved parts:
Above, the B on the left has anti-aliasing turned off. The jagged edges are readily apparent. On the right you can see what anti-aliasing does, using a series of intermediate-colored pixels to soften the edges. The image was enlarged to 400%.
There are degrees of anti-aliasing: none, sharp, strong, crisp, and smooth. I tend to use crisp, but your milage may vary. The B’s below were anti-aliased in that order (none, sharp, strong, crisp, and smooth).
Trimming
It is very important that you not use image size as spacing. This can be done much more efficiently with CSS. With the two images below, the first uses image size, and the second a left margin in CSS.
As you can see, having left the borders on, the bottom image is much smaller in area. When creating the image, I made use of the Trim function in ImageReady. Once your text is created, turn off the Background, or lowest, layer, making the background transparent, then select Image> Trim… This function will trim transparent pixels from any or all of the four sides of the image. Nice and simple. This will reduce the image’s area to its minimum, thus saving file size.
Transparency
GIF and PNG support single-bit transparency. Pick a color, any color. Adobe’s ImageReady allows you to pick multiple colors and declare them to be transparent. Cool, huh? Now put your image on a colored background:
Those nasty things around the edges of the image are called fringe. Unless you match the color of the background in the image to the color of the background on the page, you will get fringe. The way to do this is to pick the correct ‘matte’ color, shown below in ImageReady’s Optimize palette. What this does is use the correct background color when creating the transparency (or anti-aliasing the edges), so the transition is correct.
Palette Size
With solid text against a solid (or transparent) background, a GIF or PNG only uses 16 colors to do the anti-aliasing. Add a drop shadow to that text and you will need at least 32 colors in the palette. Below are a couple of examples.
Both images with a 4-color palette.
Both images now with 32-color palette.
Like any other image, it is important to look at the optimization.
ALT Attributes
XHTML requires all images to have alt attributes, and they are essential with text.This is the words that will appear if the image does not load, and is the text that is read by a screen reader. A full image tag should appear something like this: <img src="i_img/text01_32.png" alt="32 colors" id="text01_32" width="200" height="60" />. The alt should be descriptive without being overly long, which means it should be meaningful and to the point. This is code, and not imaging, but again, with text as image this is very important.
