Font Size Scale Calculator
Free CalculatorTurn a base size and a scale ratio into a harmonious modular type scale β one step down and three steps up for headings.
100% private
Runs in your browser β no numbers leave your device.
Your numbers
Your body text size in pixels β usually 16px on the web.
The multiplier between steps, e.g. 1.25 (major third) or 1.5.
1 step up
20
Base Γ ratio β subheadings and lead text.
Small (base Γ· ratio)
12.8
One step below the base β captions and fine print.
2 steps up
25
Base Γ ratioΒ² β section headings.
3 steps up
31.3
Base Γ ratioΒ³ β page and hero headings.
How it works
Set your base size
Enter your body text size β 16px is the common starting point on the web.
Pick a scale ratio
Choose a multiplier such as 1.2, 1.25 or 1.5 to control the contrast between steps.
Multiply and divide
Each step up multiplies by the ratio; the small size divides the base by it.
Read your scale
Four sizes appear instantly, updating live as you change the base or ratio.
A great type scale deserves great screenshots
Reverze rebuilds App Store screenshots into higher-converting creative
What is a font size scale calculator?
A font size scale calculator builds a modular type scale from two inputs: a base size and a ratio. Instead of picking heading sizes at random, you multiply the base by a consistent ratio to move up the scale and divide by it to move down. A base of 16px with a 1.25 ratio gives you 12.8px small text, 20px, 25px and 31.25px β sizes that relate to each other by the same proportion, so headings and body copy feel visually harmonious.
This is the same idea behind a type scale calculator used in design systems and CSS frameworks. Common ratios borrow from musical intervals β 1.125 (major second), 1.25 (major third), 1.5 (perfect fifth) and 1.618 (the golden ratio) β where a larger ratio produces bolder contrast between body text and headings. Use this calculator to lock in a scale before you write CSS, then reuse the same four sizes across your web pages, app screens and App Store creative for a consistent, professional look.