The fur was flying in our Web group the day we decided to make a definitive decision about whether to use anti-alias on our site. Up until that day, it had depended upon the whim of the designer or graphic artist whether the text was aliased or not.
Then I happened upon an article that indicated that that strange check box in Photoshop was not just there to fill up space.
I did some more research and found out that our technical writer advised to always leave it unchecked. When I asked her why, she stated that anti-alias messes up printing. Then I spoke to our graphic artist, and she said to always leave it checked. When I asked her why, she stated that otherwise graphics would look awful on the Web. The more people I spoke to, the more opinions I heard. Until we were in the meeting room with our books and stacks of research arguing about who was right.
What is Aliasing?
All computer displays show images in bitmap mode. What this means is that every image is really a bunch of tiny little squares that make up the image. What this essentially means is that computers can't display really smooth curves.
These two letters are printed with the same font face, size, and style. The only difference between them is that the top letter is aliased and the bottom is not.
As you can see, the top letter has a jagged, "stair-step" effect that is the hallmark of aliasing. It is the way that computers display curves on the screen. The bottom letter, on the other hand, has a smoother, fuzzier look to it. It is anti-aliased to simulate the look of a smooth curve on the screen.
How does anti-aliasing work?
Anti-aliasing works with the way that our eyes see things. Human eyes do not see in as precise detail as we would like to think. In reality, the mind converts the images into what it "thinks" they are supposed to look like.
With anti-aliasing, the curve is created with squares of color that are shaded darker or lighter depending on how much of the curve would take up that square. For instance, if a portion of a curve takes up 10% of a pixel, that pixel would be shaded with 10% of the color saturation of the curve.
What this amounts to is that anti-aliasing adds shading along the curve to "fool the eye" into thinking it's seeing a smooth curve rather than a jagged bitmap.
Why should I be "anti" aliasing?
Well, this depends on your point of view. There are as many reasons to alias images and fonts on the Web as there are to anti-alias them.
Anti-aliasing Pros and Cons
Pros
- Makes fonts look smoother
- Rounded edges look round
- Type is easier to read (for some) because it looks more like what printed type looks like
- It's just plain prettier (some would argue)
Cons
- Small fonts become too fuzzy to read
- Sharp edges may be fuzzy and not precise
- You can't print anti-aliased text as it comes out blurred
- Images are generally larger
- Type is easier to read (for some) because the blurring is reduced and the fonts are clear
What did we decide?
We decided to use anti-aliasing most of the time. The only time we don't use it is when we want a specific effect for a graphic (sometimes we might like the jaggies!), or with fonts smaller than 10 to 12 points. We also strive to use browser font treatments rather than images, so that when the pages are printed, the printer can decide.
