All Tools
Font & Spacing Scale Generator
Generate typographic and spacing scales from a base size and ratio. Preview sizes and export as CSS custom properties or Tailwind config.
Configuration
Scale Preview
xs
10.24px / 0.64rem
The quick brown fox
sm
12.8px / 0.8rem
The quick brown fox
base
16px / 1rem
The quick brown fox
lg
20px / 1.25rem
The quick brown fox
xl
25px / 1.5625rem
The quick brown fox
2xl
31.25px / 1.9531rem
The quick brown fox
3xl
39.06px / 2.4413rem
The quick brown fox
4xl
48.83px / 3.0519rem
The quick brown fox
5xl
61.04px / 3.815rem
The quick brown fox
Output
:root {
--font-xs: 0.64rem; /* 10.24px */
--font-sm: 0.8rem; /* 12.8px */
--font-base: 1rem; /* 16px */
--font-lg: 1.25rem; /* 20px */
--font-xl: 1.5625rem; /* 25px */
--font-2xl: 1.9531rem; /* 31.25px */
--font-3xl: 2.4413rem; /* 39.06px */
--font-4xl: 3.0519rem; /* 48.83px */
--font-5xl: 3.815rem; /* 61.04px */
}