Chapter 7 - Web Typography

Everyone visiting your Web site is a reader and responds instinctively to words set in type. The consistent use of type provides valuable information cues to the reader, and recent innovations provide powerful tools for working with type. Until recently,Web typography meant having to use too many tags and lots of text as graphics. Today, 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.

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 spacing properties
• Create a font and text properties style sheet

Resource Links

• Web Style Guide - Typography

Typography Examples

Figure 7-3: Common Web font families
Figure 7-5: Generic Font Family Samples
Figure 7-6: Font Size Sampler
Figure 7-7: Small Capitals
Figure 7-8: Text Indents
Figure 7-9: Text Alignments
Figure 7-10: Text Decorations
Figure 7-11: Line Height
Figure 7-12: Adjusting Line Height Increases Legibility
Figure 7-13: Vertical Alignment
Figure 7-14: Vertically Aligning Text and Graphics
Figure 7-15: Letter Spacing
Figure 7-16: Word Spacing

Exercise Files

• Download webnews.htm, the source file for the "Creating a Font and Text Properties Style Sheet" exercise.

Individual Case Project

Design the type hierarchy for your Case Project Web site. Create a type specification HTML page that shows examples of the different typefaces and sizes and how they will be used. This can be a mock-up page that uses generic content but demonstrates the overall typographic scheme.

Consider the following questions:

• What will be the style for the body type?
• How many level of headings are necessary?
• What are the different weights and sizes of the headings?
• How will text be emphasized?
• Will hypertext links be standard or custom colors?

Team Case Project

Revisit your project proposal and the page templates you created in Chapter 5. Each team member has been responsible for individual templates, such as the home page template, the section page template, and the article level page template. Each team member will now hand off the page template that he or she has been working on to another member of the team. This will give you a chance to work with code created by someone else, a situation you will commonly encounter in Web design.

Now that you are reviewing each other's coding work, perform a quality check to ensure your coding is consistent and standards-based. Are you following the correct syntax and file naming conventions? Do all pages contain comments to describe the code?

Working with your new page template, design a few mock-up pages with your ideas for font styles, sizes, and other text conventions. Consider the following questions:

• What will be the style for the body type?
• How many level of headings are necessary?
• What are the different weights and sizes of the headings?
• How will text be emphasized?
• ill hypertext links be standard or custom colors?

Meet as a group to determine the typographic conventions for your Web site. Create final page mockups that use generic content to demonstrate the overall typographic scheme for the Web site.

Top