Grids and vertical spacing
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.
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.
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
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.