Lesson 1: Understanding Typography in CSS
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.
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.
- 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.
- 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?
- 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.
Proceed to Lesson 2.