Type & Spacing Scales

When you nudge an element in Figma, the default nudge is 8px. That is not an accident. The 8px grid is the most common spacing system in professional design — and it has a direct code equivalent that keeps your layouts consistent.

The spacing scale

A spacing scale is a fixed set of values built on a base unit. The most common base is 4px (with 8px as the “standard step”). Here is how it maps:

Token name	Value	Figma equivalent
`--space-1`	`4px`	Nudge × 0.5
`--space-2`	`8px`	1 nudge
`--space-3`	`12px`	1.5 nudges
`--space-4`	`16px`	2 nudges
`--space-6`	`24px`	3 nudges
`--space-8`	`32px`	4 nudges
`--space-12`	`48px`	6 nudges
`--space-16`	`64px`	8 nudges

Everything in your layout — padding, margin, gap between elements — should use one of these values. Values that are “off-scale” (like 13px or 22px) are usually design mistakes worth correcting.

The type scale

A type scale is a consistent set of font sizes built on a ratio. Common ratios are 1.25 (Major Third) and 1.5 (Perfect Fifth). Starting from a base of 16px:

Token name	Value (ratio 1.25)	Use
`--text-xs`	`12px`	Labels, captions
`--text-sm`	`14px`	Secondary body, metadata
`--text-base`	`16px`	Body text
`--text-lg`	`20px`	Lead text, card headings
`--text-xl`	`24px`	Section headings
`--text-2xl`	`32px`	Page headings
`--text-3xl`	`40px`	Hero headlines

In Figma, these map to your Text Styles. If your text styles are named body/sm, body/base, heading/lg, they should translate directly to --text-sm, --text-base, --text-lg.

Scales in action

The section below uses only token-based spacing and type sizes. Change --text-base or --space-4 in the CSS and watch the scale ripple through.

<article class="article">
  <p class="label">Case Study</p>
  <h1 class="heading-hero">Designing for scale</h1>
  <p class="lead">A consistent type scale and spacing system are the foundation of every readable, well-structured interface.</p>
  <h2 class="heading-section">Why consistency matters</h2>
  <p class="body">When every spacing decision comes from the same set of tokens, layouts feel harmonious — not because of any single value, but because all the values belong to the same system.</p>
  <p class="caption">Last updated: June 2026</p>
</article>

Common mistakes designers run into

Setting font/spacing sizes randomly instead of a scale, so each screen feels like “a different system”
Using a different scale for desktop vs. mobile with no real reason behind it

The developer’s perspective

👨‍💻 What developers actually see

Designers see “a size that looks proportional,” but developers want a limited scale (like a type scale built on a 1.25 ratio) that maps onto reusable CSS variables, instead of memorizing a different value everywhere.

💡 Real-world example

Material Design’s type scale (Display/Headline/Title/Body/Label) gives a fixed, limited set of sizes that Google uses consistently across both Android and the web. (Material Design 3: Type scale tokens)