Modular Type Scale Calculator
Build a consistent heading and body size scale from one base size and ratio.
Online Tool
-3Aa — Type scale8.2px-2Aa — Type scale10.2px-1Aa — Type scale12.8pxbaseAa — Type scale16.0px+1Aa — Type scale20.0px+2Aa — Type scale25.0px+3Aa — Type scale31.3px+4Aa — Type scale39.1px:root {
--type-minus-3: 0.512rem;
--type-minus-2: 0.640rem;
--type-minus-1: 0.800rem;
--type-plus-0: 1.000rem;
--type-plus-1: 1.250rem;
--type-plus-2: 1.563rem;
--type-plus-3: 1.953rem;
--type-plus-4: 2.441rem;
}Tool Working Principle
Each step is calculated as base size multiplied by the selected ratio raised to the step number. Positive steps grow above the base, negative steps shrink below it, and pixel sizes are converted to rem using the chosen root size.
Step-by-Step Usage Tutorial
- 1Enter the base size and root size.
- 2Choose a ratio such as 1.2 or 1.25.
- 3Compare the scale steps and copy the CSS variables.
Frequently Asked Questions
Do I need an account to use Modular Type Scale Calculator?+
No. Every tool on TypeTempo runs fully in the browser with no account, email, or API key.
Is my input text stored anywhere?+
Tool calculations use the text in your browser, and the app does not send that input to the TypeTempo application server. A preview may still request font files or other assets from an external provider; those requests do not include the text you entered.
Can I use the output commercially?+
You can use generated text and CSS in personal or commercial work. If a result depends on a named typeface or third-party asset, check that family's or asset's licence before using or distributing its files.
Which browsers are supported?+
The tools are designed for modern desktop and mobile browsers. Font rendering and individual CSS or Unicode features can vary, so check the specific result in the browsers and devices you support.
Which ratio should I choose?+
There is no universally correct ratio. Smaller ratios create a subtle hierarchy for dense interfaces; larger ratios create more dramatic jumps for editorial headings. Preview the whole scale before choosing.