We use cookies to give you the best possible online experience. If you continue, we’ll assume you are happy for your web browser to receive all cookies from our website. See our
cookie policy for more information on cookies and how to manage them.

Desktop

Canvas width

Page width

Columns

Column width

Gutter width

Margin width

Tablet

Canvas width

768px

Page width

708px

Columns

8

Column width

71px

Gutter width

20px

Margin width

30px

Mobile

Canvas width

320px

Page width

280px

Columns

4

Column width

55px

Gutter width

20px

Margin width

20px

Vertical spacing

Adopting strict vertical spacing principles allows us to achieve design consistency on the Y axis. It governs the spacing between stacked elements within a component, as well as the spacing in between objects on a page. Using denominations of 5, between 5 and 80 pixels, there is plenty of scope for creative flexibility and use of negative space while still adhering to an underlying foundation of rules.

5px

10px

15px

20px

30px

40px

50px

60px

70px

80px

To ensure consistency in vertical spacing between typographical elements and other UI elements, vertical distance is ALWAYS measured from the text line height (sometimes called the 'bounding box') to line height, as the below example illustrates.

From the line height

From the line height

Replicating vertical spacing in HTML

Type, process and tools

In order for us to match the vertical spacing from designs it is essential that we export to Zeplin, which allows developers access to the measurements needed to build designs perfectly.