Member-only story
Part 3: Size and spacing
Building a design system — where to start?
(Non Medium members can read this article for free here)
Colour, space and typography — these elements are the building blocks for a solid design system. They are distinctive visual elements to focus on when building a brand. Let’s take a closer look at size and spacing…
What we’ll be covering…
Part 1 — First things first
Part 2 — Colour
Part 3 — Size and spacing
Part 4 — Typography
Part 5 — Bonus elements
Size and spacing
Spacing is often an overlooked element but is one of the biggest influences in creating a distinguishable brand. Many popular frameworks like Bootstrap and Foundation ignore the idea of a solid base-line grid. Be cautious of picking off the shelf frameworks like these. Not having a consistent unit of measurement can lead to layout inconsistencies between pages, particularly on projects with two or more designers. The “system” is only good if it is easy to follow and repeat.
8 Point Grid Sytem
There are many ways to define your measurement units, my recommendation would be to use multiples of eight. Why eight you ask? Well eight is divisible by 2 and 4. This becomes important when considering displays that multiply pixel sizes due to higher resolutions. For example, a resolution of 1.5 would multiply 5px by this number resulting in a half pixel offset — The result is an edge that appears blurred, caused by the antialiasing of that half pixel. Half pixels don’t happen on an 8pt grid system.
A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a “1x” resolution (or @1x), 1pt = 1px.
At a “2x” resolution (@2x), 1pt = 4px because resolution doubles on both the X and Y axes making it 2px wide by 2px tall (2px x 2px).
At a “3x” resolution (@3x), 1pt = 9px (3px x 3px) and so on.
(https://blog.prototypr.io/design-system-ac88c6740f53) ~ Marco Lopes
Using a base of 8 also matches up to the default browsers base font-size of 16px (8x2). Some of the most popular screen sizes are…
