TML Text or Graphical Text?
You now have options for creating text: CSS or a graphic file. Select the best match for your text elements.

Until recently the only way to use real typography on the Web was to create the type elements in an image editing program, save them as graphics files, and place them on the Web page, like any other graphic element. This is commonly done for type in titles, headings, buttons, and things other than text.

But now that newer browsers handle Cascading Style Sheets (CSS) and previous generation browsers accept the font tag, you have some options for type that don’t involve bandwidth-filling graphic files. The trick is knowing when to use a code solution and when to use a graphic file.

In this example we wanted a reddish-hued text at 16 points in Helvetica or similar face:

Font Tag: Text can be roughly formatted using tag information: This is text	This is text
CSS: Text can more accurately displayed using CSS, either inline as shown here, or as a style declaration. CSS is recommended over the font tag: This is text With either the font tag or CSS, the text will appear correctly only when the viewer’s system has one of the specified faces and the browser supports font tags or CSS. If these examples don’t look right on your browser, your browser is probably older and non-CSS compliant or you don’t have the standard faces of either Helvetica or Arial on your system.	This is text
This is a GIF file which has the same specification as the text above, but will appear this way regardless of the viewer’s system. It is on a white background so you can see the size and shape of the graphic file that contains it.

As you can see, using HTML to specify the font works quite well in this example. Your viewer gets the effect of the font display with no download overhead, the text is easy to edit?you can make either display or content changes right in the HTML file, without turning to an external graphics program and recreating a graphics file.

In this example, the graphics file is a small 1K?which might not seem like much savings, but consider the savings if the page has 15 text buttons, or if each of the twenty subheads can be presented as text rather than a graphic. And don’t underestimate the time savings in maintaining one code file rather than 15 or 20 different graphics files.

In this example, we want to use a more unusual font:

Font Tag: This is text CSS: This is text Most viewers do not have the Airstream ITC font, so they will see the default sans-serif face, the last specified face or family option in the HTML code.	This is text This is text
This is a GIF file which has the same specification as the text above, but will appear this way regardless of the viewer’s system. If the sample above doesn’t look like this graphic, you do not have Airstream ITC and are seeing your browser’s default san-serif font. The graphic is set against a white background so you can see its size and shape.

If you are using an unusual face, you’re better off creating the text as a graphic, to be sure that all readers will see what you’ve intended them to see.

Use CSS when the font is likely to be on the user’s system and the user has a 4.X or later browser.

Create a graphic when the font face and style are unusual or unique and not likely to be installed on the user’s system.

Text with CSS

Cascading Style Sheets are implemented in all current browsers. No browser is 100% compliant yet, but for basic text display all 4X and later browsers will respond the the basic CSS text display properties.

The Font tag will let you create some of the same display effects, but as of HTML 4.0, it is no longer considered a valid tag. It is a good idea to begin using CSS to ensure your documents will be compliant in the future as well as today.

For a full reference and tutorials on CSS, check out The CSS Zone. This chart provides a few highlights:

Use CSS rather than the font tag to set font display values.

Text as a Graphic

In Most Cases, Save Text Treatments as GIFS.
If your type design is primarily solid colors?and most are?it will work best in GIF format. If you have created a special effect with continuous tone coloration or photo-realistic fills, try a JPG format.  (Just keep in mind that you can’t make a JPG with a transparent background and you may not always be able to match the JPG background to the browser background color.)

This graphic works best as a GIF	This graphic works best as a JPEG

Anti-alias Larger Sizes of Type
When you convert your graphic to GIF format you may find that your color palette contains many more colors than you expect it to. A red word on a white background may result in an adaptive palette of 64 different colors. These extra colors are created by anti-aliasing the graphic.

For printed reproduction, high resolution output devices use very small pixels (high dpi, typically 600-2400 dpi) which create smooth edges on curves and smooth color changes. The computer monitor is limited to roughly 72 dp, making edges very jagged. To compensate for this, different values are assigned to the pixels surrounding the edges, which helps give a visual illusion of smoothness and makes the type more pleasant to view and easier to read.

This table shows the effects of anti-aliasing type:

Aliased graphics have jagged edges. This is a 1K file. Anti-aliased graphics have smooth edges, but the smoothness comes at a file size price. This file is a 2K file.

Don’t Anti-alias when File Size Is Critical.
Many designers think that anti-aliased graphics always look better. While aesthetically this may be true, when you take the file size into consideration, you may decide your readers will benefit more from quick loading that smooth curves. Look at your text both aliased and anti-aliased and judge where the visual appearance/file size balance lies for your page.

Don’t Anti-alias Small Type
Small type often becomes fuzzy and illegible if it is anti-aliased, especially for a mono-spaced font like OCR. However, for some faces, two layers of anti-aliased type will generate more readable type:

Aliased type is easier to read at small sizes.	Anti-aliased type becomes blurry at small sizes.	Two layers of the same anti-aliased type can improve the legibility.

Use Special Effects Judiciously
Many image editing programs used to create type graphics also support numerous special effects and filter manipulations such as drop shadows and glows. These effects can enhance the appearance of the type, if used judiciously. However they also confuse the process of deciding which file format (GIF or JPEG) is best for the graphic, increase file size, and might even overwhelm the message.

If your text graphics are getting overly FXed, take a minute to really look at what you are creating. Does the text solution help the overall design, or does it distract from it? Does the text solution help the page communicate to the viewer, or is it confusing? Does the FX make sense or are you just madly in love with it? If any of this feels familiar, reevaluate your text and try simpler possibilities. Try the text as HTML formatted text, try it as a simpler text graphic, try it as your FX version, then compare and see which enhances the communication most.

Notes: Which image makes a clearer visual statement? If your images start looking like the one on the left, take a break and reevaluate what your are trying to say with the letters.

Anti-aliasing makes larger type appear smoother. Anti-alias large type if file size isn’t an issue.

Don’t anti-alias smaller (12 point and under) type; it will often look blurry.

Use special text effects wisely and only where they add value.

Checklist for Text Effects

	Make your text brief, eliminate any extra words.
	Select a font, size, and color appropriate for your page, and don’t create graphics that include all 100 fonts you own.
	Save your file in GIF format, unless you have added continuous tone effects to the text.
	Try saving your type treatment graphic both aliased and anti-aliased; evaluate each for legibility and file size and select the one which works best. Don’t just assume anti-aliasing is always the best.
	Crop the graphic image as small as possible and don’t include background area unless it is visually necessary.
	If you are using special edge effects, including anti-aliasing, make the indexed transparency color match the background color of your Web page. If you match another color, the text will have an odd ripple around the edge when place in your page.
	Save your file in the native format of the graphics program, as well as in GIF format. That way you’ll be able to return to it later if you need to edit the text or create additional text that matches in style.