Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This
This chapter is from the book

Aliasing or Anti-Aliasing

Most digital artists prefer the way anti-aliasing looks, but anti-aliasing is not always the best technique with typography. Very small type actually looks worse and quite mushy if it's anti-aliased. Think about HTML type, the type on your computer desktop, and the type in a word processor. Very small type sizes (12pt. and smaller) do not look good anti-aliased.

Figure 2.70Figure 2.70 The top version is anti-aliased, and the bottom is aliased. Which looks better to your eye? I prefer aliased type at small point sizes and often find anti-aliasing difficult to read.

Figure 2.71Figure 2.71 Here's an example of a style guide that web designer Domenique Sillett (http://www.littleigloo.com) created for a client to show different button styles and colors for their web site. She used an aliased font called Silkscreen, which is perfect for small buttons because it is so readable.

Figure 2.72Figure 2.72 You can download the free Silkscreen font from http://www.kottke.org/plus/type/silkscreen/index.html.

Figure 2.73Figure 2.73 When type is created as an image or inside a Flash movie at larger point sizes (36 pt. shown here), it is legible regardless of whether it is serif, sans-serif, or a hybrid font.

Figure 2.74Figure 2.74 Using upper- and lowercase, or all caps can influence legibility.

Figure 2.75Figure 2.75 When used in body copy, the all caps style decreases legibility.

Figure 2.76Figure 2.76 Used for navigation elements and short sentences, the use of all caps is much more legible. Tiffany.com site is also a great example of sticking to one or two typefaces and varying color, weight, and size to create a beautiful, elegant look.

Figure 2.77Figure 2.77 Putting text over image is often a challenge to legibility. This study is in the legibility section at http://www.rsub.com/typographic.

Figure 2.78Figure 2.78 By putting a black bar between the photo and the type, the legibility is greatly increased.

Figure 2.79Figure 2.79 By putting a transparent black band between the white text and the black-and-white image, legibility is increased.

Figure 2.80Figure 2.80 By creating a band of blurry photographic content between the white type and the black-and-white image, legibility is increased.

Figure 2.81Figure 2.81 By creating a black outline around the white type, the legibility is increased.

Figure 2.82Figure 2.82 Adding a drop shadow behind the text increases legibility.

Figure 2.83Figure 2.83 Making a blurry copy of the type and positioning it behind the white type creates greater legibility.

  • + Share This
  • 🔖 Save To Your Account