Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Spatial Design System

Space is an important consideration in a design system. Enabling design & development teams to use spacing deliberately for improved readability and consistency in product

In this lesson, we will look at how to define space in a design system.

Spacing is often an overlooked element but is one of the biggest influences in creating a distinguishable brand. Not having a consistent unit of measurement can lead to layout inconsistencies between pages, particularly on projects with two or more designers. The “system” is only good if it is easy to follow and repeat.

8 Point Grid Sytem

There are many ways to define your measurement units, we recommend using multiples of eight. Why eight you ask? Well eight is divisible by 2 and 4. This becomes important when considering displays that multiply pixel sizes due to higher resolutions. For example, a resolution of 1.5 would multiply 5px by this number resulting in a half pixel offset — The result is an edge that appears blurred, caused by the antialiasing of that half pixel. Half pixels don’t happen on an 8pt grid system.

A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a “1x” resolution (or @1x), 1pt = 1px.At a “2x” resolution (@2x), 1pt = 4px because resolution doubles on both the X and Y axes making it 2px wide by 2px tall (2px x 2px). At a “3x” resolution (@3x), 1pt = 9px (3px x 3px) and so on.

Using a base of 8 also matches up to the default browsers base font-size of 16px (8×2). Some of the most popular screen sizes are also divisible by 8 on at lease one axis, which makes for an easy fit.

A larger majority of the most popular screen sizes are divisible by 8 on one at least one of its axis.

https://miro.medium.com/max/2000/1*Z0yr7p8ZFJ-M64Hu4UAl-w.png

Scaling by increments of 8 offers a good amount of options without overloading you with variables like a 6 point system, or limiting you like a 10 point system. Ultimately you have to decide what size is right for your audience.

Scale

An alternate approach to multiples of 8 is to use a scale. A modular scale helps create a rhythm with spacing that is meaningful. Spacing where the increments between spaces are based on a ratio. A popular scale to use is the Fibonacci sequence, a scale which occurs throughout nature.

If the 8 point grid system appeals to you, identify a modular scale, pick the sizes closest to a multiple of 8 or 4 and use that to inform your spacing elements (rounding the sizes to the nearest multiple of 8). This avoids the pitfalls of a strict scale where you end up with crazy numbers like 2.618, every browser will try to round this in their own way, resulting in less predictability.

Meaningful sizes

There are three general typography system archetypes, which can also be applied to spacing.

  1. Marketing — Built to tell a specific story and inspire visitors to spend their time and/or money on the site. White space is embraced, often more dramatic, utilising a larger scale ratio, resulting in more dramatic gaps between spacing elements.
  2. Editorial — To convey a large amount of information. Spacing is usually less dramatic in this cases with tighter spacing compared to the marketing archetype.
  3. Data — Built to solve a user problem like filing taxes, managing a git repo, or visualizing performance metrics. Spacing here can often be much tighter due to large amounts of data that need to be presented, the ratio between spacing is often much smaller than the two other archetypes mentioned above.

EMs and REMs vs Pixels

A case could be made for both using EMs, REMs or Pixels. The great thing about Pixels is they are they are rigid and exact, the bad thing is they are rigid and exact. So, 1px will always display as exactly 1px. If you want to be rigid, and less flexible, pixels might be the option worth considering.

The great thing about EMs and REMs is they are abstract and based on a font-size. The bad thing about EMs and REMs is they are abstract and based on a font-size. So, 1em or 1rem could translate into 16px or 160px, depending on the font sizes. This, however, does not imply that EMs and REMs cannot be rigid and as exact as pixels.

EMs and REMs give the ability to scale elements up and down, instead of being stuck with fixed sizes. We can use this flexibility to make our designs easier to adjust during development, more responsive, and to allow browser users to control the overall scale of sites for maximum readability.

So what is the real drawback? Using EMs and REMS is damn confusing, and design software tools all use pixels as their measurement unit. This makes it really hard to use for designers and developers alike.

What is a EM?

When using em units, the pixel value you end up with is a multiplication of the font size of the element being styled.

For example, if a div has a font size of 18px, 10em would equate to 180px, i.e. 10 x 18 = 180.

What is a REM?

When using REM units, the pixel size they translate to depends on the font size of the root element of the page, i.e. the HTML element. That root font size is multiplied by whatever number you’re using with your REM unit.

For example, with a root element font size of 16px, 10rem would equate to 160px, i.e. 10 x 16 = 160.

Should your system need to cater for the three archetypes mentioned earlier, REMs will give you that flexibility by simply adjusting a base font-size linked to a ratio.

Spacing Guidelines from IBM

To make things less abstract, let’s learn from IBM’s world-renown Carbon Design System and look at how they define spacing guidelines.

Creating A Spacing Scale via Design Tokens

First of all, IBM created an incremental spacing scale using the concept of design tokens. We will talk more about design tokens in a later lesson, but to give you a preview, design tokens are the visual design atoms of a design system — specifically, they are named entities that store visual design attributes. Tokens replace static values with self-explanatory names. This practice allows the design system to be more streamlined and scalable.

For example, the Carbon Design System created a total of 13 levels of spacing increments from 1 to 13, using the naming system of $spacing-number increment. Each level of spacing corresponds to a slightly larger rem number and pixel count. A visual example of what that spacing might look like is provided at the end of each level.

This system is highly standardized, scalable and easy to remember.

Spacing Token in Action

To make things even more clear, the design system provided a visual example of how the spacing tokens can be applied to a text block with 3 levels of typography and 4 levels of spacing.

Non-Token Spacing

Even though spacing tokens are excellent at standardizing, not every spacing consideration in design can be measured with numbers.

Sometimes, we have to rely on more qualitative thinking. That’s why the Carbon Design System outlined a few other non-token spacing considerations, like centering elements fluidly between two edges as screen resizes.

General Spacing Guidelines

Finally, it is helpful to provide a few general spacing best practices. Iterating the importance of creating relationships between elements that are related with the use of white space and visual hierarchy, which has been taught to designers as fundamentals of layout techniques, is still important and should be reminded.

Scroll to Top