Typography Scale Generator
Generate a modular type scale system. Choose a base size and ratio, preview all steps, and export as CSS, Tailwind, or SCSS.
Scale Settings
Ratio: Perfect Fourth (1.333)
Visual Size Comparison
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
Scale Preview
Click name to rename119.66px/7.4787rem/lh 1.2
The quick brown fox jumps over the lazy dog
89.76px/5.6100rem/lh 1.2
The quick brown fox jumps over the lazy dog
67.34px/4.2088rem/lh 1.2
The quick brown fox jumps over the lazy dog
50.52px/3.1575rem/lh 1.2
The quick brown fox jumps over the lazy dog
37.90px/2.3687rem/lh 1.3
The quick brown fox jumps over the lazy dog
28.43px/1.7769rem/lh 1.3
The quick brown fox jumps over the lazy dog
21.33px/1.3331rem/lh 1.5
The quick brown fox jumps over the lazy dog
16.00px/1.0000rem/lh 1.5
The quick brown fox jumps over the lazy dog
12.00px/0.7500rem/lh 1.6
The quick brown fox jumps over the lazy dog
9.00px/0.5625rem/lh 1.6
The quick brown fox jumps over the lazy dog
Size Reference Table
| Name | px | rem | em | Line Height |
|---|---|---|---|---|
| xs | 9.00px | 0.5625rem | 0.5625em | 1.6 |
| sm | 12.00px | 0.7500rem | 0.7500em | 1.6 |
| base(base) | 16.00px | 1.0000rem | 1.0000em | 1.5 |
| lg | 21.33px | 1.3331rem | 1.3331em | 1.5 |
| xl | 28.43px | 1.7769rem | 1.7769em | 1.3 |
| 2xl | 37.90px | 2.3687rem | 2.3687em | 1.3 |
| 3xl | 50.52px | 3.1575rem | 3.1575em | 1.2 |
| 4xl | 67.34px | 4.2088rem | 4.2088em | 1.2 |
| 5xl | 89.76px | 5.6100rem | 5.6100em | 1.2 |
| 6xl | 119.66px | 7.4787rem | 7.4787em | 1.2 |
Export
:root {
--font-size-xs: 0.5625rem;
--font-size-sm: 0.7500rem;
--font-size-base: 1.0000rem;
--font-size-lg: 1.3331rem;
--font-size-xl: 1.7769rem;
--font-size-2xl: 2.3687rem;
--font-size-3xl: 3.1575rem;
--font-size-4xl: 4.2088rem;
--font-size-5xl: 5.6100rem;
--font-size-6xl: 7.4787rem;
}