The 8pt visual purist would argue that the grid should be followed down to the pixel and push for the first option. A single talented developer can easily reason through this and deliver it. However, this breaks down for distributed teams of designers and developers. Having to keep this little key in the back of your mind is bound to create mistakes and detract from the value of having a consistent spatial measurement system. The question comes down to respecting the design file or respecting the code.

While transforming Pivotal UI to the 8pt grid I’ve been asked many questions from our internal teams when measurements are not units of 8. This kind of subtract 1px logic would only complicate our workflow and create confusion for engineers and designers. We are moving forward with the second option of allowing the 1px border to hold space outside of the 8px internal padding.

“The value isn’t just in presentation, it’s also in implementation” - Bryn Jackson

How are borders measured in design tools versus a web browser?

Sketch/Illustrator/Figma/Xd/Photoshop don’t count borders the same way a web browser does. Design tools lay borders on the inside or outside of a shape, which doesn’t count toward the shape’s size.

Modern design tools don’t measure the border

The example above depicts how two same-sized boxes with different border directions are still measured by the bounding box of the rectangle itself. A web browser measures borders as solid space on the page. There are two different ways a web browser can apply borders via the box-sizing property:

The border-box declaration brings the border onto the inside of a defined height and width but pushes against internal content. The content-box declaration pushes the padding and the border to be counted outside of a defined height and width.

If you’re interested you can read more about the history of box-sizing here or check out my Codepen example here. Both of the boxes below have the same base styling but differ in their box-sizing property and their relative space on the page changes accordingly.

All of this is to say, have a conversation with your engineers. Know where your source of truth lives whether it’s in your high-fidelity design files or the code.

“My mockups in sketch are generally off by a few pixels from the code and that’s okay. The code is the source of truth.” - Paul Farino, Pivotal Labs

Not all layouts work in an 8pt system. Android does but isn’t iOS better suited for units of 5?

Not exactly. You can set the margins/paddings to units of 8 and let the content flex. Mobile UIs have to be somewhat responsive to accommodate the variety of screen sizes available today. This means that there is no fixed grid number perfect for all mobile screen layouts.

Apple doesn’t follow an 8pt grid for desktop or mobile app layouts. Why should I?

While it is true that Apple’s HIG does not follow an 8pt system, or mention much in the way of a spatial design system, it’s still possible (Update: Apple now directly mentions 8pt grid). Google Material is the best large-scale example of an opinionated grid system, but I’ve found they shy away from explaining some of their reasoning.

The 8pt system is a way of thinking that allows teams to move quickly and efficiently. You’ll ultimately have to make the decision about what’s right for your team, product, platform, and audience.

Questions?

This is still an exploration for me. Please reach out if you’ve got some different ideas or approaches!