All Tools
Spacing Scale Calculator
Turn your type scale into consistent vertical spacing. See the recommended gap between every level, from display down to caption.
Font Selection
Scale Settings
px
8px – 120px
Recommended vertical gaps derived from your type scale. Tap any cell to preview the pairing.
Live Preview
Heading → BodyThe quick brown fox
52px
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Comfortable — Roomier and easier to scan.
This spacing improves readability by creating a more relaxed visual rhythm.
Gap Matrix (px)
| From \ To | H1 | H2 | H3 | Body | Caption |
|---|---|---|---|---|---|
| Display | |||||
| H1 | · | ||||
| H2 | · | · | |||
| H3 | · | · | · | ||
| Body | · | · | · | · |
Paragraph gap
24px
Between body paragraphs
Section gap
48px
Above a new section heading
Ready to upgrade your
brand visual strategy?
Built for designers, creators, and teams who want better visual direction and references.
Join for Free