Spacing Scale Generator
Generate a consistent spacing scale for padding, margins, and gaps.
px
Result
Spacing Scale
0: 0px (0rem)
1: 4px (0.25rem)
2: 8px (0.5rem)
3: 12px (0.75rem)
4: 16px (1rem)
5: 20px (1.25rem)
6: 24px (1.5rem)
7: 28px (1.75rem)
8: 32px (2rem)
9: 36px (2.25rem)
10: 40px (2.5rem)
11: 44px (2.75rem)
12: 48px (3rem)CSS Variables
--space-0: 0rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;Base Unit4px
About This Tool
The Spacing Scale Generator creates a modular type scale based on a base font size and mathematical ratio. Designers and developers use it to establish consistent, proportional typography systems that scale elegantly across all screen sizes and use cases.
Enter your base font size (like 16px) and choose a ratio (golden ratio, perfect fourth, etc.). The tool generates a complete scale showing font sizes for h1–h6, body text, and smaller scales with pixel and rem values ready to copy into CSS.
Build scalable, maintainable typography systems in seconds. All calculations happen in your browser with no data collection—completely private and no signup required.