Brand Design System
Know what you’re looking for? Type to search
Know what you’re looking for? Type to search

Lockup Scaling


Introduction

Not all situations can be treated the same. Lockups can be adjusted by size or arrangement to accommodate different messaging hierarchies and media sizes. On this page we cover 3 common situations and show how to address them.

Event Focused

Event focused lockups give prominence to the event title, with the save story and modifiers as secondary elements. The following examples show the ideal size ratios and spacing between elements. If this is not possible for a situation, use this as a starting point and try to stay as close as possible to these values.


Construction

A – Leading is equal to the x-height of the modifiers
B – Space after event title is 2x the value of A
C – Modifier cap height
D – Event title cap height is 4x the value of C
E – Save story cap height is 2x the value of C

Save Story Focused

Save story focused lockups give prominence to the save story, with the event title and modifiers as secondary elements. The following examples show the ideal size ratios and spacing between elements. If this is not possible for a situation, use this as a starting point and try to stay as close as possible to these values.
 

Construction

A – Leading is equal to the cap height of the event title (C)
B – Leading is equal to the cap height of modifiers
C – Event title cap height is 2x the value of D
D – Modifier cap height
E – Save story cap height is 4x the value of D

Small Sizes

When creating small creative layouts that don't allow for a clear hierarchy, reduce the number of type sizes and the amount of information. This avoids illegible type and creates a stronger simplified message to have the largest impact with the limited space available. Event titles and save story should be the same size when possible, separated by colour or space.

Construction

A – Leading is equal to the x height of the modifiers
B – Leading is equal to the 1/2 cap height of D
C – Modifier cap height is 2x the value of D
D – Event title and save story cap height

close