Hierarchy and composition

Using a strong hierarchy in design and layout can be just as powerful as the messaging. Clearly differentiating between headlines, introduction paragraphs and body copy can ensure legibility and clarity of the overall message.

Overview

Hierarchy, composition and layout

When creating layouts for communications from The City, left aligned text is preferred. A strong hierarchy should be created between headlines, introduction paragraphs, and body copy. This can be achieved through scale and colour. Each group should be distinct and clear. Colours for headlines and body copy should be pulled from our core colour palette, red, grey, black or white.

The examples below show how the clear space from the visual identifier can help determine spacing between typographic elements. Using the clear space will also help achieve the preferred amount of white space for composition and ensure legibility and clarity of the overall message.

Hierarchy of information and white space

Using a white copy block in front of an image

Using a white copy band in front of an image

Creating a focused message

Using hierarchy and whitespace

Using right-aligned text

With an image to the right of the Visual Identifier

Image behind and below the Visual Identifier

Headlines or masthead treatments

Beside the Visual Identifier

Contact Information