1. Technology

Anti-alias Information

Deciding to Use Font Smoothing on Web Images

By

Anti-aliasing fonts in Photoshop

Anti-aliasing fonts in Photoshop

Screen shot by J Kyrnin - courtesy Adobe

Anti-aliasing or font smoothing is a technique to make flat color images and text look smoother on computer screens. Photoshop offers four levels of smoothing (smooth, strong, crisp, and sharp) as well as none to turn it off.

Anti-aliasing text and images can be a tricky topic for mixed-media design teams. Print designers typically want to avoid anti-aliasing because printed fonts with anti-aliasing often look fuzzy, blurry, and imprecise. Web designers typically want to use anti-aliasing because computer monitors make curves look blocky, square, and jagged.

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 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
  • Some people feel it’s prettier

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

When to Use Anti-aliasing or Font Smoothing

Anti-aliasing is a good choice for web images with flat colors and curves and text that is intended for web pages. With text, you should try to let the browser display the fonts with CSS, rather than putting them in a graphic.

©2014 About.com. All rights reserved.