Type Scale Calculator
Builds a set of related font sizes for a design.
Largest size
— px
Share sends a link that reopens these numbers. Copy details pastes the full breakdown as a list.
Smallest size — px
The scale
The formula
size = base × ratio ^ step
Each step up multiplies by the ratio, and each step down divides by it. Larger ratios give stronger contrast between headings and body text, and use up space faster.
What to watch out for
Round the results if you like. A scale is a starting point, and it is fine to adjust by eye.
Frequently Asked Questions
What is step 3 from 16 px at 1.25?
31.25 px.
Which ratio should I pick?
Smaller ratios such as 1.125 or 1.2 suit dense interfaces. Larger ones such as 1.5 suit pages with few, large headings.