6. Typography 1

Up until now, CSS has been used for layout, but not really composition. This exercise will serve as an introduction to typography and the web. Typography on the web is vitally important to keep your viewer on a page, rather than wandering elsewhere because the content is not easily readable.

Like print, there are many considerations when using type on the web: the font (or fonts), the font size, line length, line height… All of these will come into play in this exercise. Along with these, you will need to deal with a visual hierarchy.

The visual hierarchy has to deal with elements that are other than basic text, such as headings, subheadings, captions, pull quotes, the list goes on. Your reader should be able to easily identify these elements, without losing the basic text.

The biggest working change to be made here is the addition of a reset style sheet. This will essentially zero out all browser default presentation, so that all presentation that you add is just that, additive. Using a reset will be standard operating procedure from now on.

Additionally, we will be adding web fonts. This will allow more variety in fonts choices. This does not preclude a font stack, it just gives you more options.

This exercise also involves attempting to write an efficient style sheet, working from biggest to smallest, making use of the cascade built into CSS. Thus, set your base font first, so that it cascades, then make detailed changes later in the style sheet.

The same flexible layout from the previous exercise will be used.


  1. Use the film processing text from exercise 2.
  2. This file must contain anchors back to your home page and the index page for exercises.
  3. As with the all assignments, once the local version is finished and tested, upload the changes to the server, and test from there.