Lesson 1: Understanding Typography in CSS

Overview

In this lesson you will learn the basics of typography as it applies to web pages. Typography is the art and technique of arranging type on a page. The font family, style, size, and weight (or thickness) all play a role in typography on the Web, as does the spacing between lines and letters. All of this can be controlled using CSS.

Learner Outcomes

At the completion of this exercise:

• you will have identified four guidelines for using typography effectively on web pages.
• you will have evaluated several web pages on whether they effectively follow the above guidelines.

Activities

1. Read John Boardley's Guide to Web Typography. In this article, the author (John Boardley) describes how to use contrast, size, hierarchy, and space effectively.
2. Next, browse the Web and find web pages that are good examples and bad examples of each of the four principles described in the article. This will be a total of eight pages - one good and one bad example of each principle. Simply browse through a variety of web pages and ask yourself:
   • Does this page have good contrast?
   • Does this page use font sizes that are easy to read, even for people with poor vision?
   • Does this page use hierarchy effectively? Is the page organized into a clear structure (with obvious headings and subheadings?)
   • Is space used effectively? Is there plenty of empty space around blocks of content? Does the page avoid having content that's overly cluttered or cramped?
   If you have trouble finding good or bad examples, you might be able to fill in the gaps by doing an Internet search for "web pages with good typography" or "web pages with bad typography"
3. Make a list of the web pages you found, and discuss them with your instructor or class. Be prepared to explain why you think they're good or bad examples.

Resources

• A Guide to Web Typography by John Boardley, I Love Typography
• Web Style Guide: Typography

All done?

Proceed to Lesson 2.