Typography Scale
Choose a base size, ratio, and number of steps to create a reusable typography scale.
CSS variables
A QUICK WALKTHROUGH
How to use this tool
- Set a base size from 8 to 64 px.
- Choose a ratio from 1.05 to 3 and 2 to 12 steps.
- Generate CSS variables and fluid values.
Geometric scale
Each step equals base size multiplied by ratio to the step index.
Responsive CSS
Fluid values use clamp with a bounded range around each size.
Line-height disclosure
Generated comments show line-height 1.5 as an assumption; adjust it for your typeface.
GOOD TO KNOW
Common questions
What does ratio control?
It is the multiplier between adjacent type sizes.
Are sizes responsive?
The output includes clamp values for steps after the base.
Can I change line-height?
Yes. The 1.5 comment is a disclosed starting assumption.