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.
A solid type scale is the foundation of a great design system. In 20 minutes I'll audit your design workflow and show you where AI can automate typography standards, accessibility checks, and component library generation at scale.
Get Your Free AI Scan →