web typography study guide

About Anti-aliasing

One big difference between type displayed on screen vs. printed type is the existence of aliasing [fig.1].

    Aliasing displays the diagonal and curved lines in a graphical element as a series of small zigzag horizontal and vertical lines.

    Anti-Aliasing is a technique that reduces or eliminates aliasing by shading the pixels along the border of a graphical element.

Certain adaptations of anti-aliasing can enhance both the legibility and aesthetics of on-screen type, though not in every case [fig.2].

To smooth the edge of a simple black-on-white character on the screen, a program like Photoshop creates 16 to 20 intermediate tones of gray to fill in the steps.  From normal viewing distances, the type will look smooth.

tip Type sizes of 14 points and up usually can be anti-aliased quite successfully. Around 12 points, it depends very much on the weight and design of the typeface. Below that, it’s much better to use a properly designed screen font without anti-aliasing.