Font Scale Calculator
Generate harmonious typographic font scales using mathematical ratios for consistent web typography.
Scale Settings
Type Scale Preview
Step -2
The quick brown fox
10.2px
0.640rem
Step -1
The quick brown fox
12.8px
0.800rem
Step 0
The quick brown fox
16.0px
1.000rem
Step 1
The quick brown fox
20.0px
1.250rem
Step 2
The quick brown fox
25.0px
1.563rem
Step 3
The quick brown fox
31.3px
1.953rem
Step 4
The quick brown fox
39.1px
2.441rem
Step 5
The quick brown fox
48.8px
3.052rem
Step 6
The quick brown fox
61.0px
3.815rem
CSS Variables
:root {
--font-size-0: 0.6400rem;
--font-size-1: 0.8000rem;
--font-size-2: 1.0000rem;
--font-size-3: 1.2500rem;
--font-size-4: 1.5625rem;
--font-size-5: 1.9531rem;
--font-size-6: 2.4414rem;
--font-size-7: 3.0518rem;
--font-size-8: 3.8147rem;
}Scale Summary
Base
16px
Ratio
1.25
Steps
9