Tagvisual design

πŸ”– The Comprehensive 8pt Grid Guide (archive)

The system uses points not pixels because the pixel density of devices wary and we want to keep our designs consistent across different densities. iPhones for example could be rendering 2x or 3x the number of pixels. So, we design for the smallest size, and get perfect rendering by multiplying by 2 or 3.

Font sizes may stray from multiples of 8 but the line heights shouldn’t so as to maintain vertical rhythm. For example, a font size of 12px is acceptable as long as the line height is 16px.

Should be constructed in the 8pt grid and exported for higher density screens.

For the horizontal layout, customize your column grid library or settings to make sure the gutters are a multiple of 8. Setup variables to use later when setting dimensions, margin and padding:

:root {
  --small-space: 8px;
  --medium-space: 16px;
  --large-space: 24px;
  --x-large-space: 32px
  /* and so on */

πŸ”– 8-Point Grid

Use multiples of 8 to define dimensions, padding and margins of all elements. Set the root font size to 16px and use 0.5rem increments to build the layout. By limiting your spacing options and font size options you get a more consistent UI and faster coding times.