Chapter 5 - Typography

The type choices you make for your site provide the foundation for the clear communication of your content. The consistent use of type to express the hierarchy of your content provides valuable information cues to the reader, and the choices you make to enhance text legibility affect the usability of your web site. Cascading Style Sheets offers a potent style language, allowing you to manipulate a variety of text properties to achieve professional, effective results, all without resorting to graphics that add download time. New type properties and more new fonts are available for designers, providing more typographic choices and control over type characteristics. New applications and web font tools let you test and manipulate fonts so your content is readable across multiple devices.

When you complete this chapter, you will be able to:

• Understand type design principles
• Understand Cascading Style Sheets (CSS) measurement units
• Use the CSS font properties
• Use the CSS text properties
• Build a font and text properties style sheet
• Customize bulleted and numbered lists

Typography Example Files

Figure 5-5: Common Web Font Families

Figure 5-7: Generic Font Family Samples

Figure 5-8: Various Font Sizes

Figure 5-9: Small Capitals

Figure 5-10: Text Indents

Figure 5-11: Text Alignments

Figure 5-12: Line Height

Figure 5-13: Vertical Alignment

Figure 5-14: Vertically Aligning Text and Graphics

Figure 5-15: Letter Spacing

Figure 5-16: Word Spacing

Figure 5-17: Preserving White Space

Figure 5-18: Text Decoration

Figure 5-19: Text Shadow

Figure 5-25: Unordered and Ordered List Elements

Figure 5-26: Different List Marker Types

Figure 5-27: Attaching an Image as a List Marker

Figure 5-28: Positioning the List Marker

Activity Files

Download the Chapter Five activity files.