|
Anti-Aliasing One of the most important techniques in making graphics and text easy to read and pleasing to the eye on-screen is anti-aliasing. Anti-aliasing is a way of getting round the low 72dpi resolution of the computer monitor and making objects appear as smooth as if they'd just stepped out of a 1200dpi printer (nearly). Take a look at these images. The letter a on the left is not anti-aliased and looks coarse compared with the letter on the right.
Anti-aliasing works by reducing the prominence of jaggies by surrounding the stairsteps with intermediate shades of gray (for gray-scaling devices) or color (for color devices). Although this reduces the jagged appearance of onscreen text, the drawback is that it also makes the text edgest fuzzier. But anti-aliasing is more than just making something slightly fuzzy so that you can't see the jagged edges: it's a way of fooling the eye into seeing straight lines and smooth curves where there are none.
Pixels around an un-anti-aliased line can only be part of the
line or not part of it: so the computer draws the line as a jagged set of
pixels roughly approximating the course of our original nice smooth line.
When the computer anti-aliases the line it works out how much of
each in-between pixel would be covered by the diagonal line and draws that
pixel as an intermediate shade between background and foreground. In our
simple-minded example here this is shades of grey. This close up the
anti-aliasing is obvious and actually looks worse than the un-anti-aliased
version, but try taking your glasses off, stepping a few yards back from the
screen and screwing up your eyes a bit to emulate the effect of seeing the line
on a VGA monitor covered in crud at its right size. Suddenly a nice, smooth
line pops into view. So how does one go about anti-aliasing an image? Just be grateful you don't have to do it by hand. Most screen design programs, including Photoshop and Paintshop Pro, include anti-alias options for things like text and line tools. The important thing is simply to remember to select the option at the appropriate time. When sent to a printer, fonts are formed from tiny dots, hundreds of them of them in an inch for most commercial printing. Even at very small sizes, printer fonts generally display the detail required to keep characters smooth and separate. The major problem with small fonts on the Web, however, is monitor resolution. 72 dpi does not deliver the fine detailing needed for clear fonts at a small size. At 72 dpi, all but the most obvious detail is lost in a screen font at small sizes. Take a look at the sample below, which was produced in Photoshop. The samples are labeled by font and feature 10 pt and 11 pt type. The left set has anti-aliasing turned off and the right sample is set to Crisp anti-aliasing. The final sample contains 8 pt Arial and Times New Roman.
There are not many acceptable examples in the entire selection. Note how the samples with the anti-aliasing turned off are rough, and definitely need kerning (adjusting the spaces between characters) At 8 pts, the text without anti-aliasing is breaking up too badly to use. Anti-aliasing is only available when you are working with RGB images, such as JPEGs. It is not applicable to 8-bit images, such as GIFs. However, even with the lightest anti-aliasing available, most of the samples are "fuzzy." What can you do? Experiment with many of the fonts you have now. Usually, fonts that are more "square" work best. It is impossible to give overall recommendations, since colored fonts on varied backgrounds colors produce a different effect for each one.
Experiment and find one or two small fonts that display crisply for the work you do. I have had a fair amount of success using Verdana at small sizes, with no anti-aliasing, but often did a lot of kerning (adjusting the space between letters), which is very time-consuming. |
To see how anti-aliasing works, let's take
a diagonal line drawn across a set of pixels. In the example left the pixels
are marked by the grid: real pixels don't look like that of course, but the
principle is the same.
