(click anywhere to close)
OPEN MENU

[Typography] Hierarchy I

category: Design | course: Typography | difficulty:

I’ve already mentioned emphasizing and hierarchy several times, but now is the moment we can finally take a good look at it. Hierarchy is one of the most important aspects of any typographic design; if we don’t know where to start, if we don’t know the importance of each piece of text, if we don’t understand the message or information, the design has failed. Hierarchy is all about clarifying the level of importance of a certain text block, and establishing connections and relationships between different pieces of information. It can be established in many, many ways, and this chapter will look at some of the key concepts.

Contrast

Difference among elements is created with contrast. One or multiple visual cues must signal the user that a change in hierarchy is happening. There are a lot of ways to do this, but some of them aren’t really part of typography, so I will only mention typographic contrasts here.

TypographyContrastModes

The general options for creating contrast are

  • Size: The most obvious one, visually and structurally, which I will discuss thoroughly in the next sections.
  • Style: A change from one style to another, such as switching from regular text to boldface, is a great and common visual cue.
  • Alignment: Text blocks or phrases that are aligned differently automatically feel like they are acting together on a different level.
  • Direction: With this I refer to the general direction or dimensions of a text block. For example, body text might be put in a wide rectangular field, while a narrow column beside it might contain notes or remarks.
  • Colour: A change in colour can be very noticeable, or not at all, depending on the style and size of the text. Colour can also increase or decrease the importance of a piece of text, depending partly on the context. Read more about this in the COLOUR THEORY course.
  • Space: Indenting or adding more space around text blocks provides a way to set them off from the elements around it.
  • Placement: Readers expect headings to be at the top, for example, while text blocks pushed against the edges of the paper seem of lesser importance or an afterthought.
  • Texture: You can change the texture of a piece of text by choosing a different typeface altogether, or changing the case (as lowercase has more texture than uppercase). Whether this increases importance and attracts attention depends on the properties of this added typeface.
  • Form: The outer form of a text block (e.g. rectangular, circular, trapezoid, and so on) also provides a strong visual cue that differentiates between content. This is hard to achieve without compromising legibility, though.

As you can see, there’s a lot of cues, and they can be used in near infinite amount of combinations. It’s therefore recommended to never use too many signals – more than three cues is usually too much. Multiple cues should only provide backup for each other; a single subtle shift should be enough to establish hierarchy for the focused reader.

Because of this, it’s recommended to change one parameter at a time when trying to establish your hierarchy. If you immediately assign three cues to every level of hierarchy, you’ll clutter the foreground and waste time and space on something you don’t need.

Common Structures

While you can design the hierarchy any way you want, there’s a common structure that works well and everybody’s familiar with. This structure is something along the lines of:

Title => Chapter => Heading => Subheading => Body Text => Notes => Structural Elements

TypographyCommonHierarchy

The title is the shortest, but also often the biggest and most obvious element on the page. When people see a page, they need to immediately be able to scan the title to see what it is or if it’s what they were looking for.

From there on you can have multiple levels of headings (depending on how your content is structured), which all need to be visually distinct from each other, yet make clear that they are a heading. Use as many headings as you need; no more and no fewer. If your content has only one header or maybe none at all, go with that and don’t invent headers.

Only then comes the body text, which is relatively small in font size and doesn’t have much other contrast applied, as it makes the text (more often than not) hard to read. A separate level is also used for notes or asides that talk about the body text, but aren’t important enough to be within the body text.

Lastly, we have the structural or navigational elements, such as page numbers, or a phrase in the margin that states your current location within a book. These should never be in view as the user is reading, but if he needs to go somewhere else, they should be easy to find and understand.

Font Size

The best way to start with creating your hierarchy, is by determining the fonts and font sizes for each particular level. We’ve already talked about matching fonts, to a maximum of about three, and never using a font you don’t need. When it comes to font sizes, you usually require more variety and bigger contrasts between the different sizes.

Type Error: Never use only one font size for a complete typographic design.

Font size should be determined with a scale. Which scale you use is up to you, but you should never arbitrarily pick sizes. By using a scale, such as multiplying font size by 1.618 (golden ratio) for every higher level of the hierarchy, you establish a pattern and rhythm, while keeping an adequate amount of contrast (as too little difference in font size will make it seem like you made a mistake).

TypographySizeHierarchy

The best font size for body text in print is 10–12 points, and for the web it’s 15–25 pixels.

Why is the recommended size for web larger? Because the web is different. We usually view webpages from a greater distance, on a bigger screen. Webpages are huge projects with extra (interactive and dynamic) things added to it and scrolling ability.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)