When it comes to digital product design, a mockup or prototype’s sole purpose is to clearly communicate a proposed solution to stakeholders and developers. In the end, only what a developer can reproduce in code can make it to production.
What matters most is how your designs behave in code on a user’s device, prioritizing reducing the time between ideation and programming over the perfect layout in Sketch or Photoshop wherever possible.
What are the points?
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.
At a “3x” resolution (@3x), 1pt = 9px (3px x 3px) and so on.
Why 8?
Several reasons, the first being that it scales perfectly in all the different screen displays. It’s a good basic unit to work with. The numbers 4 and 8 are easily multiplied. They provide flexible and consistent yet distinct enough steps between them.
Typography
When establishing a typographic system, I strive to keep my styles distinct yet consistent.
While font sizes may vary and stray from the 8 multiplication, the line-height mustn’t. The Paragraph font size can be 15 pixels, for example, but the line height should be a multiplication of 8, so 24px is an acceptable value.
Iconography
Exporting a 16×16 pixels icon for iOS will perfectly render icons in 16, 32, and 48 pixels.
If you intend on using icons in a different size, I would recommend designing your icon on a 16×16 pixels grid and another version on a 20×20 pixels grid. This way, you’re covered for any size: 16, 20, 24 (16×1.5), 32, 40, and so forth.
Why it matters
Consistent UI
When all of your measurements follow the same rules, you automatically get a more consistent UI.
Fewer decisions = less time
By removing 7 of every 8 spacing options, you reduce the amount of fiddling available to you and subsequently reduce speed to code.
Multi-platform design
Regardless of form-factor, most popular screen sizes are divisible by 8 on at least one axis — usually both. Additionally, some platforms’ style guides (like Material Design) call specifically for a grid of 4 or 8 points, making this system a natural fit.
