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.

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.

Sketch to Zeplin or Sketch to Invision Inspect