What are spacing best practices (8pt grid system, internal ≤ external rule, etc.)?
TL;DR
- Adopt the 8pt grid system as your foundation for uniform spacing, ensuring elements align seamlessly across varying screen sizes. The principle of 8pt grid is that it uses multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.
- Apply the internal ≤ external rule to balance the space within elements (like padding) and the space around them (like margins), aiming for external space to equal or exceed internal space for clear distinction and group cohesion.
- Use multiples of 8pt for margins and paddings to maintain consistency and scalability.
- Adjust spacing based on context. Increasing spacing for emphasis or clarity, and consider line heights in multiples of 8 or 4 for finer typography control.
Detailed answer
Spacing best practices, such as the 8-point grid system and the internal ≤ external rule help create a structured, consistent, and aesthetically pleasing design by managing the space within and between elements effectively.
The 8pt grid provides a consistent baseline for spacing across your design, ensuring elements align neatly on a scalable grid.
The internal ≤ external rule, on the other hand, focuses on the relationship between the spacing inside an element and the space surrounding it. It ensures that elements and their groupings are perceived as distinct and cohesive, enhancing the overall layout's clarity and navigability.
The rule of internal and external spacing
This principle, rooted in the law of proximity from Gestalt psychology, helps designers create consistent and harmonious compositions, whether they're working on text layouts, interfaces, or any design involving multiple elements.
Let's break down this concept for clarity:
Internal spacing (padding) refers to the space within an element, such as the padding inside a button.
External spacing (margin) is the space around an element, often referred to as the margin in design terms.
Related reading: Why is spacing important?
The fundamental rule can be distilled into a simple equation: internal ≤ external. This means the space around elements (external) should be equal to or, ideally, greater than the space within them (internal). This guideline ensures elements are perceived as distinct yet part of a cohesive group when necessary.
According to Gestalt principles, the proximity of elements influences how we perceive their relationship. Elements spaced closely together are seen as part of a group, while those farther apart are viewed as separate. This is where internal and external spacing play important roles. By adjusting these spaces, designers can influence the perception of elements as either individual entities or part of a larger group.
The 8-point grid system
The 8-point grid system is a widely embraced standard in design, favored for its simplicity and scalability across various devices and screen sizes. By adhering to multiples of 8 (8, 16, 24, etc.) for elements' dimensions, padding, and margins, designers can create consistent, scalable designs with a rhythmic visual hierarchy.
Why 8 Points?
- Scalability: The 8-point system scales perfectly across different screen sizes, ensuring consistency and coherence in design across devices (including Android’s x0.75 and x1.5).
- Efficiency: It streamlines communication between designers and developers, making it easier to translate designs into code.
- Aesthetics: Using this system contributes to cleaner, more visually appealing designs.
Additionally, Apple and Google recommend using the 8-point system.
Implementing the 8-point system in design
Hard vs. soft grids
Understanding the distinction between these approaches can guide the application of the 8-point grid in design.
To put it succinctly, hard grids lock content into a predetermined framework, whereas soft grids establish the spacing between elements based on their relationships, not according to an overarching, document-wide grid. Soft grids, which define the spacing between elements without adhering strictly to a document-wide grid, often mirror development environments more closely.
Setting up your grid
Whether you're designing for web or mobile, integrating the 8-point grid with tools like Bootstrap for responsive design can facilitate a seamless design-to-development transition.
Begin with the horizontal rhythm/grid by employing Bootstrap's standard 12-column layout, featuring a 24px gutter width (1.5rem). For designs meant for desktop views, such as a 1440px artboard, it's advisable to apply a 60px margin on each side of the container.
When addressing vertical rhythm/grid, stick to an 8px height for elements like typography, iconography, cards, and buttons to ensure they integrate smoothly within your layout, thanks to the 8-point system.
Spacing and typography
Consistent spacing between elements and a harmonious vertical rhythm in typography are critical for a visually appealing design. By using multiples of 8 such as 8px, 16px, 24px, and 32px for all element margins and paddings, designers can create a clean, organized layout that enhances user experience.
Pro tip: Font sizes might vary across devices – 14px, 15px, 21px, etc – but maintaining a line height that follows multiples of 8 (8, 16, 24, 32...) is important. You can also use a 4-point multiplication for line height (4, 8, 12, 16...) to achieve more precise control and superior results.
Actionable steps
- Start with the 8px grid. Use it as your foundational guideline for spacing between elements, margins, and padding.
- Apply the internal ≤ external rule. Within the structure of the 8px grid, adjust the spacing to ensure that the internal spacing of elements is never greater than the spacing between them and other elements.
- Adjust based on the context. While the 8px grid provides a general guideline, the context in which elements are used may require adjustments. For instance, more significant spacing may be needed around larger elements or to separate distinct sections more clearly. In these instances, the internal ≤ external rule guides how to adjust the spacing to maintain visual hierarchy and readability.
- Keep the content span inside grid borders. Like a swimmer that stays in their pool lane, keep the content span inside grid borders, regardless of its type. This makes sure that your content stays inside the safe area without bleeding into the margin.
🛠️ Useful tools
These tools will make your job easier and more effective.
- Typescale – develop a uniform typography system quickly.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- Everything you should know about 8 point grid system in UX design by Ashphiar Raihan Rumman
- The rule of internal and external by Alla Romasheva
📚 Keep exploring
Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.
- The Comprehensive 8pt Grid Guide by Vitsky
- Proximity Principle in Visual Design by Aurora Harley
- Layout by Apple Documentation
- Intro to The 8-Point Grid System by Elliot Dah