Home » Resources » Ratio Driven Design »

Stacks

Ubiquitous vertical rhythm. Self-contained: no trailing spacing; no doubled-up margins.

Basic use

Key ways of controlling the vertical rhythm of type.

Standard rhythm

Consistent spacing between everything! Most often suitable for limited amounts of content.

Example

Occaecat cupidatat non proident

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

This is controlled by global axiomatic spacing: 

* + * {
    margin-top: var(--size-1);
  }

Long-form rhythm

For intentionally longer passages of text, extra space can be added between titles and preceding passages.

This provides more-obvious distinction and hierarchy in articles and long information pages.

Example

Occaecat cupidatat non proident, sunt in culpa

Lede / introduction. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Standard paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sunt in culpa qui officia deserunt mollit anim

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sunt in culpa qui officia deserunt mollit anim

Standard paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Occaecat cupidatat non proident, sunt in culpa

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS (SASS)

The .text--long-form class can be added to any HTML parent element, around the entirety of the text, to trigger this targeted extra spacing:

.text--long-form {
    * + {
      & h2, & h3, & h4, & h5, & h6 {
        margin-top: var(--size-3);
      }

      & h1, & h2, & h3, & h4, & h5, & h6 {
        & + p {
          margin-top: var(--size-1);
        }
      }
    }
  }

Optional adjustments

For tweaking spacing.

Base rhythm

Consistent — but smaller than standard — spacing between content.

Example

Duis aute

Occaecat cupidatat non proident

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

CSS (SASS)

The .text--base-spacing class can be added to any HTML parent element, around the desired text, to trigger this limited spacing:

.text--base-spacing {
    * + * {
      margin-top: var(--size-base);
    }
  }

Tight rhythm

Consistent — but small — spacing between content.

Example

Duis aute

Occaecat cupidatat non proident

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

CSS (SASS)

The .text--tight-spacing class can be added to any HTML parent element, around the desired text, to trigger this limited spacing:

.text--tight-spacing {
    * + * {
      margin-top: var(--size-small-1);
    }
  }

Collapsed rhythm

No spacing between content.

Example

Duis aute

Occaecat cupidatat non proident

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

CSS (SASS)

The .text--no-spacing class can be added to any HTML parent element, around the desired text, to trigger this limited spacing:

.text--no-spacing {
    * + * {
      margin-top: 0;
    }
  }