Design Tools
Typography Scale Generator
Generate harmonious typography scales
16px
Preview
6xl
4.768rem
The quick brown fox jumps over the lazy dog
5xl
3.815rem
The quick brown fox jumps over the lazy dog
4xl
3.052rem
The quick brown fox jumps over the lazy dog
3xl
2.441rem
The quick brown fox jumps over the lazy dog
2xl
1.953rem
The quick brown fox jumps over the lazy dog
xl
1.563rem
The quick brown fox jumps over the lazy dog
lg
1.25rem
The quick brown fox jumps over the lazy dog
base
1rem
The quick brown fox jumps over the lazy dog
sm
0.8rem
The quick brown fox jumps over the lazy dog
xs
0.64rem
The quick brown fox jumps over the lazy dog
Scale Table
| Name | Size | Line Height | Letter Spacing | Weight |
|---|---|---|---|---|
| xs | 0.64rem | 1.6 | normal | 400 |
| sm | 0.8rem | 1.55 | normal | 400 |
| base | 1rem | 1.5 | normal | 400 |
| lg | 1.25rem | 1.45 | -0.01em | 400 |
| xl | 1.563rem | 1.4 | -0.01em | 600 |
| 2xl | 1.953rem | 1.35 | -0.02em | 600 |
| 3xl | 2.441rem | 1.3 | -0.02em | 700 |
| 4xl | 3.052rem | 1.25 | -0.02em | 700 |
| 5xl | 3.815rem | 1.2 | -0.02em | 700 |
| 6xl | 4.768rem | 1.15 | -0.02em | 700 |
:root {
/* Base size: 16px, Scale ratio: 1.25 */
--font-size-xs: 0.64rem;
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.563rem;
--font-size-2xl: 1.953rem;
--font-size-3xl: 2.441rem;
--font-size-4xl: 3.052rem;
--font-size-5xl: 3.815rem;
--font-size-6xl: 4.768rem;
/* Font family */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Typography classes */
.text-xs {
font-size: var(--font-size-xs);
line-height: 1.6;
}
.text-sm {
font-size: var(--font-size-sm);
line-height: 1.55;
}
.text-base {
font-size: var(--font-size-base);
line-height: 1.5;
}
.text-lg {
font-size: var(--font-size-lg);
line-height: 1.45;
letter-spacing: -0.01em;
}
.text-xl {
font-size: var(--font-size-xl);
line-height: 1.4;
letter-spacing: -0.01em;
}
.text-2xl {
font-size: var(--font-size-2xl);
line-height: 1.35;
letter-spacing: -0.02em;
}
.text-3xl {
font-size: var(--font-size-3xl);
line-height: 1.3;
letter-spacing: -0.02em;
}
.text-4xl {
font-size: var(--font-size-4xl);
line-height: 1.25;
letter-spacing: -0.02em;
}
.text-5xl {
font-size: var(--font-size-5xl);
line-height: 1.2;
letter-spacing: -0.02em;
}
.text-6xl {
font-size: var(--font-size-6xl);
line-height: 1.15;
letter-spacing: -0.02em;
}
Why Use Typography Scale Generator?
- ✓100% Free - No hidden costs or premium features
- ✓No Signup Required - Start using instantly without creating an account
- ✓Privacy First - All processing happens in your browser. Your data never leaves your device
- ✓Lightning Fast - Instant results with no server delays
How to Use
- Enter or paste your text in the input area above
- The tool will automatically process your input
- Copy the result or download it as a file
Features
- ✓Multiple scale ratios (golden, minor third, etc.)
- ✓Base size customization
- ✓Preview all heading levels
- ✓CSS, SCSS, and Tailwind export
- ✓Responsive scaling options
- ✓Line height recommendations
Frequently Asked Questions
What is a typography scale?
A typography scale is a series of harmoniously related font sizes based on a mathematical ratio.