Build a harmonious modular type scale. Pick a base size and ratio — copy as CSS variables, Tailwind config, or raw values.
Base Size
Scale Ratio
Preview Font
Live Preview
Scale Values
| Step | rem | px |
|---|---|---|
| xs | 0.5628 | 9 |
| sm | 0.7502 | 12 |
| base ← | 1 | 16 |
| lg | 1.333 | 21.33 |
| xl | 1.7769 | 28.43 |
| 2xl | 2.3686 | 37.9 |
| 3xl | 3.1573 | 50.52 |
| 4xl | 4.2087 | 67.34 |
| 5xl | 5.6102 | 89.76 |
| 6xl | 7.4784 | 119.66 |
Export
:root {
--text-xs: 0.5628rem;
--text-sm: 0.7502rem;
--text-base: 1rem;
--text-lg: 1.333rem;
--text-xl: 1.7769rem;
--text-2xl: 2.3686rem;
--text-3xl: 3.1573rem;
--text-4xl: 4.2087rem;
--text-5xl: 5.6102rem;
--text-6xl: 7.4784rem;
}What is a modular scale? Each step is the previous value × the ratio. A Perfect Fourth (1.333) creates a natural, harmonious progression — the same interval used in music. Smaller ratios like Major Second (1.125) are subtle; larger ones like Golden Ratio (1.618) are dramatic.