Space

Introduction

Space is an invisible yet important interface element. The distance between objects is necessary for establishing relationships and a subtle way to influence visual style. A clear method for implementation is essential for coherency.

These guidelines are intended for space outside and inside elements. It does not include a grid system or layout patterns which will be established in future releases.


Approach

To address the complex problems of space consistency throughout a large product offering, we rely on a simple scale. Merely establishing a scale forces space decisions to snap to the established values.

For example, you may have “felt out” anything and everything between 7 to 17 pixels for a particular design. This scale limits your choices to a half space (8px) or a full space (16px).

Approach

It is much more likely for your space decision to fall in line with other similar decisions made by other designers. The result is more consistent spacing throughout the product and a less jarring experience switching from view to view.

Simplifying choice also results in easier and more efficient decision making.


Scale

Our scale is based on a 16px unit. We chose 16px because it is our base typography size and a factor of common screen resolutions.

Instead of using the common t-shirt style sizing (small, medium, large, etc.), we opted to use fractions and multiples of our base space. The result is an easy to learn scale with simple vocabulary that conveys specific meaning.

Space Scale

Our space sizes are Eighth Space (2px), Quarter Space (4px), Half Space (8px), Full Space (16px), One and a Half Spaces (24px), Two Spaces (32px), Three Spaces (48px) and Four Spaces (64px).

This approach also mitigates risks of adding additional values in the future without busting the scale. (It’s difficult to add a value between XXS and XS.)


Implied Meaning of Space

Space implies relationships and divisions. A small amount of space between elements implies association of elements. Vice versa, large amounts of space implies disassociation.

The closer elements are to one another, the stronger their relationship.

Relationships


Space is Relative

The amount of space to convey appropriate relationship is dependent upon how space is being used throughout a layout.

In very dense interface, a half space may be too large for associated elements. However, in a sparse interface with lot of negative space, the same half space may imply relationship.

Space is Relitive


Style

To support our fresh and clean style, we rely heavily on negative space. A healthy amount of negative space with appropriate grouping of elements makes information easy to scan and less daunting. Because of this, designers are encouraged to lean toward more space between main elements.

When making a difficult choice between space sizes for separating main elements, favor the larger option.


Measuring Typography

When measuring space for typographical elements, start from edge line-height. Do not measure from the baseline, mean line, ascenders line or descenders line.

Space is Relitive


Measuring Boxes

When measuring space for a box, start from the edges. Boxes have two types of space: inside (padding or inset) and outside (margin).

Box

Inside space is the space between the edge of the box and its contents. Outside space is the space between the box and other elements. Outside and inside space may or may not share the same value.


Tools

Adjusting the distance of “nudge” (⇧ + arrow keys) in your graphics application from 10px to 8px makes moving elements along the scale much easier. For Sketch users, try the Nudge, Push, Shove plugin - it has settings that align with our scale.

Setting a 16px background grid can also be useful for aligning and spacing elements.


Implementation

For implementation of space on the web, head over to Uniform UI for space classes, space mixin and space variable.