Hierarchy

One function of headings is to define the hierarchy of a web page. The semantics behind
HTML document structure naturally include some sense of hierarchy, with headings
ranging from the big and bold h1 to the diminutive h6. However, from a visual perspective,
it’s the task of the designer to indicate this hierarchy so that the site retains a sense of
design and personality.
Khoi Vinh’s web site, Subtraction, which you can see in Figure 1.1, is an excellent example
of using just font size and weight on headings to create an immediate sense of hierarchy.
The layout grid for this site also helps to create a visual structure, but what if we were to
convert the structure of the page into a linear layout? As shown in Figure 1.2, the headings
themselves still convey a lot of the information required by the user while retaining the
site’s character—insofar as Helvetica can adequately express a site’s character all by itself
nowadays!

A List Apart web site takes a very different tack from
Subtraction when differentiating its headlines from its content.2 Weight and font size
are used again, but these effects are combined with different typefaces, colors, and
capitalization for the article headings and author names.
At first glance, it could be said that the A List Apart headlines are more differentiated than
those on the Subtraction site, but at the end of the day it’s all about what style ties into
a site’s particular design. Subtraction’s style is more conservative and minimalist, A List
Apart’s more ornate. The designers of both sites have done excellent work in creating a
visual hierarchy within the respective frameworks.
Because of the well-formed semantics underlying this visual hierarchy, CSS is well suited
to manipulating the appearance of each and every heading to produce the visual effects we
require for a clear structure.
However, hierarchy is but one aspect of headings. Let’s look at that other, more elusive,
aspect—identity.