- 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
Typography Aesthetics
There are many limitations with typography on the Web—especially with HTML type—and many of these are discussed in Chapter 20, "HTML Type." This chapter instead focuses on the design principles of type. It also concentrates on type as an image of type, or type in a Flash movie, rather than HTML-generated type.
Glossary of Key Typographic Terms
Before you venture too far into the subject of web type, let's establish a common vocabulary. The following examples cover many of the basics of type terminology.
){kind=small}
Figure 2.31Serif: A serif typeface has a stroke attached to the beginning or end of one of the main strokes of each letter. Many people think this style of type is the easiest to read as body copy. The default font in most browsers is a serif typeface: Times Roman on Macs and Times New Roman on PCs.
){kind=small}
Figure 2.32Sans-serif: A sans-serif typeface has no slab attached. Sans-serif type is specified with the FONT FACE tag, which is described fully later in this chapter.
CSS Can Do
Many of the typographic functions listed in this section that are not possible with HTML are possible with CSS, which will be addressed in Chapter 23, "Cascading Style Sheets."
)
Figure 2.33Monospace: A monospace font uses the same amount of horizontal width for every character, unlike a standard proportional font, which uses a different amount of space for each character. The top example shown here is set in Courier and could be accomplished in HTML with the PRE tag. You can specify monospace typefaces with the PRE, CODE, or TT tags.
){kind=small}
Figure 2.34Default leading: Leading (pronounced ledding) is the measurement of space between lines of type. The origin of the word "leading" dates to early days of typography when lead type was used. Blank pieces of lead were used between rows as spacers. This figure shows standard leading in HTML using no custom tags.
){kind=small}
Figure 2.35Looser leading: This design can be re-created with CSS using the line-height property. You'll learn more about CSS in Chapter 23, "Cascading Style Sheets."
){kind=small}
Figure 2.36Spacing: This is the amount of space between each letter of a word. This can be managed with CSS.
){kind=small}
Figure 2.37Drop cap: A drop cap is used with all capital letters to indicate that the first letter of a word should appear in a larger size. In HTML, you can create a drop cap by using the FONT SIZE tag or with CSS, which is the preferred method.
){kind=small}
Figure 2.38Small caps: HotWired uses small caps on its front page ad. This example shows the use of small caps as a form of headline. Different sized text is best typeset using CSS.
){kind=small}
Figure 2.39Body text: The body text, or body copy, of a document is the main block of text.
){kind=small}
Figure 2.40Headline text: A headline is used to break up information. It can do so by being larger in size, a different color, or a different font. It might have an underline, bold, or other visual treatment, which will cause it to stand out.
Baseline shift: Enables you to change the position of a single character up or down.
Kerning: Enables you to adjust the spacing between individual characters.This can be achieved in CSS by using the letter-spacing property.
Leading adjustment: Enables you to specify a particular leading by using point size measurements. This can be achieved in CSS by using the line-height property
Word spacing: Enables you to adjust the space between words. This can be achieved in CSS by using the letter-spacing property.
Tracking: Enables you to adjust the global spacing between letters.