The 8-Point Grid: A Shared Language for UI Spacing
The 8-point grid system stops spacing debates by making every dimension and gap a multiple of 8px. It's used in design systems like Google's to create consistent layouts that render cleanly across devices. The biggest mistake is breaking the rule for "feel."
Why it exists
Interfaces often become messy with arbitrary spacing—a 13px margin here, a 15px gap there. This creates visual inconsistency and forces developers to measure screenshots. The 8-point grid system was created to establish a simple, shared rule that ensures consistency and speeds up the entire product development workflow.
The mental model
Think of the 8-point grid as a shared language for spacing. Instead of infinite choices, your team agrees on a finite scale of values (8, 16, 24, 32px, etc.). This removes subjective debates about what "feels right" and provides a predictable system for both designers and developers. It trades absolute creative freedom for team-wide speed and visual harmony.
How it works
You establish a base unit of 8 pixels and apply it to all spatial properties. Every margin, padding value, and even component dimension should be a multiple of 8. For example, a button might have 16px of internal padding, while the margin between two cards could be 24px. Some teams use a 4px half-step for tight spaces, like between an icon and its label. The key is consistency. The main exception is font size, which does not need to follow the 8px rule.
When to use it
Use this system as the foundation for a design system, especially when working in a team. It is ideal for creating responsive layouts, as most popular screen resolutions divide evenly by 8, preventing blurry half-pixel rendering. It's best implemented using spacing tokens (e.g., 'spacing-sm: 8px', 'spacing-md: 16px') in Figma or code to create a finite, shared vocabulary for the team.
When not to use it
While powerful, it's not an unbreakable law. The most common exception is typography; font sizes like 14px or 18px are perfectly acceptable. The grid should apply to the space around the text (like line height and margins), not necessarily the font size itself. Avoid it for highly artistic, non-uniform layouts where a strict grid would be creatively limiting rather than helpful.
One canonical example
Google's Material Design is built on an 8dp (density-independent pixel) baseline grid. All components, from buttons to cards and lists, align to this grid. For instance, a card might have 16dp of internal padding, and the space between list items is typically 8dp. This ensures that applications built with Material Design have a consistent visual rhythm and scale predictably across all Android devices and the web.
Interview question
When is it generally acceptable to deviate from the 8-point grid system for UI spacing?
- a.When a specific element's visual balance "feels right" at a non-multiple of 8px.
- b.For typography elements like font sizes, or in highly artistic, non-uniform designs.Correct
- c.To achieve perfect pixel alignment across all diverse screen resolutions.
- d.When integrating third-party components with predefined, non-8px spacing.
Why? this is the answer
The card explicitly states that font sizes do not need to follow the 8px rule, and it should be avoided for highly artistic layouts. The biggest mistake is breaking the rule for 'feel', making option A incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → wpdean.com
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on ui design — each one lists the topics its interview covers.
See open roles