Free Typography Tools
Type Scale Calculator
Generate a modular typography scale in pixels and rems from a base size and ratio.
What this tool does
Create a repeatable hierarchy from one base font size.
The calculator multiplies or divides a base size by a modular ratio to create predictable steps above and below body copy.
Every step includes pixel and rem values with a live relative-size preview.
Use the tool
Build a modular type scale
Set the base size, ratio, and number of steps, then copy the resulting values.
Scale settings
Build a consistent hierarchy from one base size and a modular ratio.
Type scale
3.815rem
3.052rem
2.441rem
1.953rem
1.563rem
1.250rem
1.000rem
0.800rem
0.640rem
How to use it
Three quick steps
- 1Choose the base font size used for body copy.
- 2Select a ratio and the number of steps above and below the base.
- 3Review the hierarchy and copy sizes into design tokens.
Worked example
Create a major-third scale
Use 16px as the base and 1.25 as the ratio.
FAQ
Questions about the type scale calculator
Practical details about using the tool and understanding its result.
Keep working
Related tools
PX/REM/EM Converter
Convert pixel typography values into rems, ems, and points using real root and parent contexts.
Open toolGrid Calculator
Calculate precise column widths from a canvas, margins, gutters, and column count.
Open toolColor Contrast Checker
Check foreground and background colors against WCAG AA and AAA contrast targets.
Open toolFrom one asset to the whole workflow
Keep typography tokens and implementation feedback together.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.