Spacing Units

Spacing Units (SU) are a systematic way of applying predefined spacing dimensions to your designs. By using spacing units, you can create consistent layouts and simplify decision-making around margins, padding, and gaps.

Foundation CSS Spacing Variables

Foundation CSS uses two key variables to define its spacing system:

These variables are used throughout Foundation CSS for width, height, and spacing calculations, ensuring consistency across all components. The 12-column grid system provides a flexible foundation for responsive layouts while maintaining proportional relationships.

What are Spacing Units?

Spacing units provide a simple, consistent way to define space in your designs. They work similarly to how typography scales work for text sizing, giving you predefined values that work well together.

Foundation CSS defines space in rem units (relative to the root font size), making your designs compatible with browser text resizing and maintaining high accessibility standards.

Spacing Unit Scale

Using Spacing Units in CSS

Foundation CSS provides atomic classes for all spacing units:

Typography Scale

Foundation CSS uses a systematic typography scale inspired by traditional printing terminology. This approach provides semantic naming that helps designers and developers communicate effectively about type choices.

Font Size Scale

Our typography scale uses names derived from traditional type measuring techniques, going back as far as 1582. Some names came from the type of book produced in that size - for example, Primer was used for religious books ordered by Henry VIII.

Font Weights

Responsive Typography

Foundation CSS automatically adjusts font sizes across different breakpoints to ensure optimal readability on all devices. The typography scale adapts to screen size while maintaining proportional relationships between different text sizes.

Typography Scale by Device

Inspired by the BBC GEL Typography guidelines, our type sizes are optimized for average screen densities and reading comfort under typical conditions. We size our type across four device categories to suit a range of devices and input methods:

The sizes shown correspond to font-size/line-height and are in pixels, based on a baseline of 72 pixels per inch (ppi). Foundation CSS uses relative units (rem) to allow for browser text resizing and better accessibility.

Best Practices

Spacing Unit Guidelines

Typography Guidelines

Examples

Button Component with Spacing Units

<button class="btn btn--primary">Primary Button</button>
<button class="btn btn--secondary">Secondary Button</button>

.btn {
  padding: var(--su3) var(--su5);  /* 12px 20px */
  border-radius: var(--br-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn--primary {
  background-color: var(--blue);
  color: var(--light);
}

.btn--primary:hover {
  background-color: var(--blue-600);
}

Article Layout with Typography Scale

Card Component with Combined Concepts