Grids and vertical spacing
Creative alignment for confident design
Fluidity at 3 breakpoints
Fluid grid layouts allow us to maintain consistency within a responsive user interface, resulting in visually confident design solutions. Our 3 device breakpoints allow developers to deliver structured creative design across mobiles, tablets and larger screen sizes.
Desktop
Canvas width
1290px
Page width
1230px
Columns
12
Column width
75px
Gutter width
30px
Margin width
30px
Tablet
Canvas width
768px
Page width
708px
Columns
8
Column width
71px
Gutter width
20px
Margin width
30px
Mobile
Canvas width
768px
Page width
708px
Columns
8
Column width
71px
Gutter width
20px
Margin width
30px
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.
