What are spacing best practices (8pt grid system, internal ≤ external rule, etc.)?


  • 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.

 A visualization of the inner spacing (padding) and outer spacing (margin).


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.

A visualization of the 8-point grid system and its multiples of 8.


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).

A visualization of the scalability potential of the 8-point system.


  • 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.

Sitenna's dashboard showing different documents, folders, and photos.

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.

Sitenna's dashboard showing different documents, folders, and photos with 8pt grid system.

👋 View the case study 

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.

Visualization of the typography spacing of the 8-pt grid system.


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

  1. Start with the 8px grid. Use it as your foundational guideline for spacing between elements, margins, and padding. 
  2. 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. 
  3. 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.
  4. 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! 

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers. 

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent