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.
- A Guide to Web Typography by John Boardley, I Love Typography
- Typography on the Web - dev.Opera
- Web Style Guide: Typography
Proceed to Lesson 2.