Pictures of Text
Part of How Do They Do That With HTML? by Carl Tashian

One problem with text in HTML is that you can't use just any font you fancy; you have to use specific fonts--fonts that everyone in the world is bound to have on their computer. If you want to use a special font, perhaps for a more stylized look on your page, you have to make an image of the text in an image editing program. Unfortunately, pictures of text are hard to edit and they take longer to download. So many sites blend pictures of text with regular text in an HTML file, giving the page a unique look while keeping things under control. For example, a site I worked on, called home.cwru.edu, has text interspersed with pictures of text in a way that doesn't look awkward. The pictures of text only stand out because they're titles (so they're meant to have visual contrast), not because they're pictures of text.

Not Anti-Aliased Anti-Aliased
Use anti-aliasing where appropriate

With pictures of text, the most important thing to pay attention to is anti-aliasing. Anti-aliasing simply means "edge smoothing". Most fonts have the unfortunate characteristic of being designed in black and white (no greys, just black and white). At larger sizes, the harsh black and white edges introduce jagged lines everywhere in the letters, as you can see on the far left. Anti-aliasing introduces grey pixels to smooth out the transition between white and black, as you can see on the near left. It's clean and beautiful, don't ya think? If your image editing program doesn't have an option for anti-aliasing text, you should find another one that does.

But anti-aliasing isn't always the answer. Take a look at the front page of Salon. They use anti-aliased text for their title ( ), but not for their small menu items ( ). The small menu items look great without anti-aliasing, because the font size is so small. Another example: in most web browsers you'll notice that large title text ( Pictures of Text ) is automatically anti-aliased by the web browser, while small text (the body of this article) is not. The fact is, anti-aliasing with text sizes below 12 points makes the text difficult to read.

Readability should always win out in the end.

Spice it up with special effects

And speaking of readability, here's my opinion: People tend to overdo special effects on web pages. An animated, multicolored drop shadow with embossed gold text and super neon glow just doesn't look very good, and it often makes text impossible to read. How many professional sites use these effects? None. Good fonts are able to convey a lot of style on their own, and they can be given a unique look with the use of color, spacing, or a simple special effect. Beyond that, things start getting out of hand:

If self-important, flaming red text is what you prefer, then don't let me stop you from going totally wild. It's your web page after all. Most image editing programs have a number of built-in special effects and filters for any kind of image component, whether it's a bit of text or a picture of your neighbor's gecko. If you're still not satisfied with built-in effects, however, you can buy add-on filters like Alien Skin Eye Candy or Kai's Power Tools for Photoshop or Paint Shop Pro. They do all sorts of cool stuff.

Avoid Transparent GIFs

Most image editing programs will let you save pictures as transparent GIFs, which have a designated "transparent" color. This is useful if you have a textured background and you don't want perfectly rectangular images on your page. Rather than having to make the background of the image line up with the background of the page (a painstaking process), a transparent GIF will simply show your page background wherever the transparent color exists. Unfortunately, you can't have pixels that are "45% transparent" in a transparent GIF--it's all or nothing. So here's where the problem comes in: Lets say you make anti-aliased text and you save it as a transparent GIF. The pixels around the text will still be grey, which may not look good against, say, a blue background.

The left image shows what anti-aliased text looks like if it's saved as a transparent GIF (intended to be displayed on a white background) and displayed on a web page with a blue background. Whoops. Bad idea. The image on the right is anti-aliased text set on a blue background in an image editing program, then saved as a standard GIF. The background color of the page it's being displayed on becomes irrelevant. This subtle difference in technique turns out to be very important.

So what's the conclusion? Transparent GIFs are difficult to use. Some image editing programs make things easier by allowing you to choose an intended background color (other than white) for the transparent GIF, but this can still be troublesome when you've got multiple colors the background image of your web page. Most of the time your best bet is to only use solid colors as backgrounds on images and on web pages. This way, you avoid transparent GIFs completely. Just make sure the background color of your images is exactly the same as the background color of your web page, and everything will be nice.

Now go here:

More on Typography:

For fonts:


[ return to front page ]

Reproduction of material from this page without written permission is strictly prohibited
Copyright © 1995-2001 Carl Tashian