How to use Typography Scale and Line Height Calculator
- Enter a base font size and choose a ratio.
- Enter the root font size for rem conversion.
- Review the seven fixed steps, their suggested line heights and the CSS variables.
Example: Typography Scale and Line Height Calculator
Build a major-third scale.
You add
Base: 16 px. Ratio: 1.25. Steps: -2 through 4. Root size: 16 px.
You get
Step 0 is 16 px, step 1 is 20 px and step 2 is 25 px.
Supported inputs and limits
Seven steps from -2 through 4, a base of 8–48 px and one of the listed ratios. Line heights follow the shown size bands; sizes are rounded to 2 decimal places in pixels and 4 in rem. It does not measure a font or guarantee reading comfort.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
The ratio is a starting rhythm
A mathematical scale gives repeatable size relationships. Actual headings can need adjustment for long words, font metrics and narrow columns. Keep the scale useful rather than forcing every text role onto it.
Questions about Typography Scale and Line Height Calculator
What does step zero mean?
It is the entered base size. Positive steps multiply by the ratio; negative steps divide by it.
Why do rem sizes change on another page?
A rem depends on that page’s root font size. The conversion uses the root size you enter here.
Is one line height suitable for every size?
Not necessarily. Inspect body text and large headings in your actual font and container.