- 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
This chapter is from the book
This chapter is from the book
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.
){kind=small}
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.
){kind=small}
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.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.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.