Spacing

Using correct spacing creates rhythm that allows for people to find and process information better.

For the spacing between elements on a page a vertical rhythm is used in the form of a scale.

Scale

The following spacings can be used both vertically and horizontally.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Responsiveness of the scale

The scaling base starts with 0, and this base is the default body font-size. In this case scale-0 is 16px. This has the advantage that if the body font size is enlarged by a user, the spacings will grow with to accommodate for the new larger sizes.

Examples

The spacing is applied using a variety of different classes. Resulting in the spacing applied is dependent on the type of element and where it's located on a page. Or if it's in combination with another element. Or even a background that is used can have influence on the amount of spacing applied.

Sections and headers

Every element has spacing in the form of padding's and margins. However, for the vertical rhythm of a page the most prominent vertical margins (space between elements) are:

  • A. section space: space around a section (space-header-*)
  • B. headers: space around the header (space-section-*)

These are used intertwined to reach the desired result.

A. space-header-*

1. Example space-header-page:

HTML code snippet

<h2 class="space-header-page title-section">A title used to separate sections</h2>

Results in:

A title used to separate sections

Example space-header-section:

HTML code snippet

<h2 class="space-header-section title-section">A title used above sections</h2>

Results in:

A title used above sections

Example space-header-column:

HTML code snippet

<h2 class="space-header-column title-column">A title used above columns</h2>

Results in:

A title used above columns

B. space-section-:

Example space-section-intro:

Usually the first section on a page.

HTML code snippet

<section class="space-section-intro">
    <!-- then the header has a space depending on which location it's used -->
    <h2 class="space-header-page title-section">A title used to separate sections</h2>
</section>

Results in:

A title used to separate sections

Example space-section-last:

Usually the last section on a page.

HTML code snippet

<section class="space-section-last">
    <!-- then the header has a space depending on which location it's used -->
    <h2 class="space-header-page title-section">A title used to separate sections</h2>
</section>

Results in:

A title used to separate sections