- Color Aesthetics
- Choosing Color Themes
- Applying Color Relationships to Web Design
- Color Gallery
- Typography Aesthetics
- Type 101
- Verdana & Georgia
- Font Size Differences Between Macs & PCs
- Fonts for Delivery as Web Graphics
- Basic Styles of Typefaces
- What Is a Font Family?
- Aliasing or Anti-Aliasing
- Body Copy
- Using Fireworks for Type Design
- HTML for Placing Text Graphics
- What About Flash?
- Aesthetics of Layout
- The Aesthetics of Animation
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.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.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.72 You can download the free Silkscreen font from http://www.kottke.org/plus/type/silkscreen/index.html.
Figure 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.74 Using upper- and lowercase, or all caps can influence legibility.
Figure 2.75 When used in body copy, the all caps style decreases legibility.
Figure 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.78 By putting a black bar between the photo and the type, the legibility is greatly increased.
Figure 2.79 By putting a transparent black band between the white text and the black-and-white image, legibility is increased.
Figure 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.81 By creating a black outline around the white type, the legibility is increased.
Figure 2.82 Adding a drop shadow behind the text increases legibility.
Figure 2.83 Making a blurry copy of the type and positioning it behind the white type creates greater legibility.