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.

Return to the Web Development - Fonts page.

Print this tip

Get the Newsletter

Thanks For Sharing!

Newest Tips:

Microsoft Word 2010
Make Sure Others Can See Your Fonts

Microsoft PowerPoint 2010
Animations or Video Displaying Poorly?

Google Chrome
[MODIFIED] Report a Malfunctioning Web Page, Crash, or Other Issue

Google Gmail
Show Unread Message Count as an Icon

Follow Us!

Email Twitter RSS

About MalekTips and the Author