Spacing should be balanced and consistent to guide our users and provide a pleasant experience.
Purpose
Using spacing and sizing in a correct and consistent way is crucial to have a balanced, calm and easy-to-read interface. It also has a strong functional purpose as it allows you to:
- Form logical groups of information
- Create hierarchy
- Steer the focus to important items
- Close areas of content
- Provide better readability
- Create the right dimensions (including components)
To achieve the right consistency and balance, or “optical rhythm”, we need to have a spacing and sizing system that can be applied to separate items on a page and to create the right dimensions. The amount of spacing or sizing that’s needed highly depends on context. By using logical increments of 8 pixels (and 4px for the smaller spaces), we can achieve this.
Spacing versus sizing
When we talk about spacing, we talk about the distance between elements or the internal spacing (or padding). This is not the same as sizing, as sizing refers to the actual dimensions of an element. However, these two are closely related and should follow the same logic in terms of increments or baseline grid system.
Increments and baseline grid
Our spacing system is based on increments of 8px and includes additional 4px increments for the smallest sizes. In general, an 8px system works well, but there are scenarios that require 4px increments to a certain point. When small or textual elements should form groups for example, or to compensate for an area with rounded corners to create optically correct spacing.
This means that if you would draw grid lines on a page for every 4px, the elements should align to it. Sometimes on a single line (4px), but mostly on double lines (8px). This is also referred to as a baseline grid.
Use cases
Spacing to form (or separate) groups
The right spacing allows you to create balance and form logical groups of content (known as the law of proximity). When applied correctly, an interface becomes much easier to “read” for our users. In components and content areas, we generally use relatively small spacing to accomplish this. However, even a small difference in sizing can impact the way it will be perceived.
Generally, the purpose of smaller spacing is to form groups and the purpose of larger spacing is to separate groups. Here’s an example of how spacing can be applied in a small content area (such as a card component) to accomplish this. Notice how the content group uses smaller spacing.
Since this logic can basically be applied everywhere when creating digital products, there are countless examples of this. Form fields that belong together, buttons that should form related actions etc.
Internal spacing
Internal spacing, or padding, exists to separate content from the outer edges and is used in almost all components. It makes it “breathe”, better to read and can simultaneously result in appropriate sizes for interactive components (think about the right target size, for example).
The amount of padding is context-dependent. It can depend on the device type/viewport width, the size of the component (a large component with small padding looks unbalanced), the information density, or the required touch target sizes, for example.
Spacing between sections
As mentioned, one of the main functions of spacing is to group and separate content. Within a content section the amount of spacing is relatively small, but between sections of content, larger spacing should be applied. This enables users to clearly distinguish sections from one another.
The amount of spacing you choose here is platform and device specific. Applying the same spacing on, for example, a mobile device as a desktop device creates an unbalanced look. On mobile, this spacing should be somewhat smaller as the viewport is a lot smaller and elements like typography and imagery as well.
Always be consistent with the amount of spacing between section when applying it. Prevent using another value to separate sections on different pages or the same device (or viewport range).
Spacing and sizing to create (fixed) dimensions
Sizing refers to the actual dimensions of elements. Sometimes this is the sum of the content and the internal spacing (also known as padding). But it can also be fixed. Think about the size of icons, images or the line heights for text styles; these dimensions are specifically set. The dimensions used for this should follow the same baseline grid logic (always divisible by 8 or 4px), and for some elements, such as icons, there are strict sizing rules in place.
For our components, we should prevent using fixed dimensions as this limits flexibility. If the content changes or a text style is updated, the component should never break.
Spacing and layout
The way we structure an entire page layout and how we align elements horizontally on the page is defined by our grid system. Our spacing units are also applied to our grid, using margins and gutters that follow the same logic.
Accessibility considerations
To make the text easier to read for some visitors, they may use a custom stylesheet, bookmarklet or application to override the spacing we define.
To ensure the reading experience is optimal, text and other elements should not overlap outside the container, and there should be no loss of content or functionality. When the spacing is defined as fixed units, you might run into a situation like in the image below.
This text spacing bookmarklet may be used to test the following, ensure the content meets the minimum requirements set out by SC 1.4.12:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Be aware that our default spacing and sizing units may get overwritten.