Modular Scale Calculator
Generate harmonious typography scales using modular ratios. Perfect for creating consistent, visually pleasing type hierarchies.
The base size is your body text size, typically 16px for web.
Each step is multiplied by 1.25 (4:5)
Major Third Scale
Base: 16px | Ratio: 1.25 | 4:5
Typography Scale Preview
-3micro
2xs - The quick brown fox
-2caption
xs - The quick brown fox
-1small
sm - The quick brown fox
0body
base - The quick brown fox
+1lead
lg - The quick brown fox
+2h6
xl - The quick brown fox
+3h5
2xl - The quick brown fox
+4h4
3xl - The quick brown fox
+5h3
4xl - The quick brown fox
+6h2
5xl - The quick brown fox
+7h1
6xl - The quick brown fox
+8display-sm
7xl - The quick brown fox
+9display
8xl - The quick brown fox
+10display-lg
9xl - The quick brown fox
Scale Values
| Step | Name | Semantic | Pixels | REM | EM |
|---|---|---|---|---|---|
| -3 | 2xs | micro | 8.19px | 0.512rem | 0.512em |
| -2 | xs | caption | 10.24px | 0.640rem | 0.640em |
| -1 | sm | small | 12.80px | 0.800rem | 0.800em |
| 0 | base | body | 16.00px | 1.000rem | 1.000em |
| +1 | lg | lead | 20.00px | 1.250rem | 1.250em |
| +2 | xl | h6 | 25.00px | 1.563rem | 1.563em |
| +3 | 2xl | h5 | 31.25px | 1.953rem | 1.953em |
| +4 | 3xl | h4 | 39.06px | 2.441rem | 2.441em |
| +5 | 4xl | h3 | 48.83px | 3.052rem | 3.052em |
| +6 | 5xl | h2 | 61.03px | 3.815rem | 3.815em |
| +7 | 6xl | h1 | 76.29px | 4.768rem | 4.768em |
| +8 | 7xl | display-sm | 95.37px | 5.960rem | 5.960em |
| +9 | 8xl | display | 119.21px | 7.451rem | 7.451em |
| +10 | 9xl | display-lg | 149.01px | 9.313rem | 9.313em |
Scale Ratios Reference
When to Use Which Ratio
- -Minor/Major Second: Subtle scales for dense content
- -Minor/Major Third: Balanced, good for most websites
- -Perfect Fourth: Classic, widely used in editorial
- -Golden Ratio: Dramatic, great for headlines
Best Practices
- -Use 16px as base for optimal browser compatibility
- -Prefer rem units for scalable, accessible typography
- -Smaller ratios work better on mobile screens
- -Test your scale with actual content before finalizing