SITEMAP

Fonts > Vector vs Raster : Font Collecting : Anti-aliasing : Using fonts : Making Titles : Effects : Dingbats

anti-aliasing

Anti-aliasing is an issue that impacts upon any work with graphics, particularly for the screen. I've covered it here in the fonts section as that's where it impacts the most for people learning web design. The term "smoothing" in relation to fonts means anti-aliasing, and probably gives you a better idea of what it means if you've never heard the term.

Basically, the problem is that a pixel is square. In order to create the appearance of a softened curve, the colours between the image and the background need to be "averaged" into each other. Some operating systems and browsers "smooth" fonts automatically making text appear less chunky, especially when it's

LARGE

If that appears as jagged-looking, you probably haven't got your fonts being smoothed. Even with smoothing, it probably won't appear as softened as text that I've done as a graphic file, with anti-aliasing (such as the "next page" at the bottom).

Since the effect requires averaging of the background and foreground colour, it won't work in a 2-colour gif. And for practical reasons, it won't work in a graphics package when you're working in 256 colours or less - even though in your final versions, you only usually need 16 colours. In order to get the anti-aliased effect then, you need to create your text as a full colour/ high colour image, with the background colour close to your final intended background colour (see also transparency). You check "antialias" when you create the text. Once you've made & placed your text, you then drop the number of colours down to reduce the filesize and save it as a gif, with transparency if required.

Tip: If you're doing text of more than one foreground/text colour, it's better to create a separate graphic for each different coloured text. Sixteen shades of one colour is enough for effective anti-aliasing, but if there are four colours to be averaged to the background colour, then there will only be 3-4 shades per "average", so the smoothing effect won't work well. If you must have more than one foreground colour in the one gif, you're probably better off to only drop it to 256 colours.