This tip was printed from the MalekTips Computer and Technology Help and Tips website at http://malektips.com.

Web Development - Fonts - Why Are my Font Graphics Jagged?

If you use graphics to simulate different fonts on a page, you may notice that some of your fonts appear jagged. To solve this problem, you must use a graphics program that supports a feature called anti-aliasing. Corel PhotoPaint and Adobe PhotoShop support this feature, as do many shareware programs.

Anti-aliasing, at least in this case, smoothes the edges between two colors, such as your font color and the page/table background color. If your graphic has a black background and red text, for example, anti-aliasing will change some of the pixels in your graphic. It will create intermediary colors between red and black near the edges of your font, making the font appear to have smooth edges.
In order to do this correctly, you have to do a few things. First, determine the background color of your webpage or part of the webpage where your font graphic will appear. Use that color as the background color of your image. Now, place your text on the image, being sure to use anti-aliasing (see your graphics program manual for information). Now, save the font graphic as a transparent GIF, and make the transparent color the background color of your font graphic.

If you do this correctly, your font should appear very smooth on your website, giving it more of a professional look.