web typography study guide

Hierarchy

Any page of text starts out as a solid block of type. Barring intervention, the reader will start at the top left and work down to the bottom right—so there is a natural flow there from the beginning. However, the designer can present the text in a logical manner to make it easier for people to find the information they need.

Prioritizing information successfully is one of typographic design’s most essential functions. The designer can treat type differently to affect how the viewer reads and perceives the text on a website.

    The ordering system, or hierarchy, defines the level of activity and importance for every visual element and determines their sequence through the design.

All elements on a website cannot be visually equal. To create visual hierarchy is to establish emphasis and contrast. The level of attention a specific element can demand from a user is often referred to as visual weight.

Hierarchical Development Process

  1. Rank the text by importance. Simply put, the designer must determine what he or she wants the viewer to see first, second, third, and so on.
  2. Create a clear focal point. The dominant element is the focal point. Usually it will reside in the foreground (the area appears to be closest to the viewer) and demand attention.
  3. Use subordinate visual elements to support the focal point. The subordinate visual elements will activate the middle ground or background in support of the dominant elements. The combination allows for in-depth interpretation and understanding of the message.

Typographic Factors

Changing or adjusting one or several of the following typographic factors can effectively shift the visual weight between different type elements:

Some strategies to create typographical hierarchy work well in print but are not ideal on the web. Examples of this include italics, underlining, and change of orientation.

Although italics often are used in printed matter to give emphasis, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on web pages, especially at smaller sizes in a condensed space.

Underlining has a special meaning on a web page. It indicates a hypertext link, so it really is not a good idea to use underlining for any other purpose lest the reader be confused.

A line of type that is upside-down on a page is very noticeable, but also is difficult to read. On a printed page the reader could simply turn the page around, but that’s not quite so easy with a desktop computer.