Typography

Our secondary tones provide an additional opportunity to create hierarchy within compositions. By shifting the tone from line to line, we can control the order in which the information is read.

Type Hierarchy
Scale

In order to keep things simple, no more than three type sizes should be used in one communication piece. These sizes follow a simple formula: each type size should aim to be a minimum of 50% larger than the preceding type size.

Correct Usage
This composition works because there is a clear contrast in scale between the headline and body copy. The information is read in the correct order and there is a visually pleasing relationship between the elements in the composition.
Acceptable Usage
In some instances, it might be necessary to break this rule and have two type sizes that are closer together. In this case, a minimum 35% size difference should be followed.

Type Hierarchy
Secondary Tones

Our secondary tones provide an additional opportunity to create hierarchy within compositions. By shifting the tone from line to line, we can control the order in which the information is read.

Correct Usage
Incorrect Usage

The above example shows an incorrect use of our secondary tones, where they do not fall incrementally. This causes problems and means the information isn’t read in the intended order.

Type Hierarchy
Blocks

Our graphic blocks can also create hierarchy through scale. When adding typography to the blocks, always ensure the type size in any given block is larger than the one before it.

Correct Usage
Incorrect Usage 01

This example may seem similar to the previous one, but the key difference is that the type sizes are too similar to each other. Always ensure there is a visible difference in size to ensure the hierarchy is effective.

Incorrect Usage 02

While it may be tempting to size typography so that it stretches the width of the block, this can cause problems if the line lengths are different. Instead, always focus on making the type size noticeably larger than the type size of the previous block.