Type scale calculator — a modular font-size scale
Choose a base size and ratio and get a modular type scale with CSS variables. It calculates entirely in your browser (0 uploads, works offline).
How to use it
- Set the base size and pick a ratio.
- See the scale rendered at real sizes.
- Copy the CSS custom properties.
FAQ
How do I build a modular type scale for free?
Set a base size (say 16px) and a ratio (say 1.25), and this page multiplies up and down to produce a harmonious set of font sizes with names, previewed at real size, on your device with no upload.
What ratio should I use?
Smaller ratios like 1.125 or 1.2 suit dense UI; larger ones like 1.333 or the golden ratio suit expressive, editorial layouts. Preview a few and pick what fits.
Is anything uploaded?
No. The scale is computed entirely in your browser and nothing is transmitted or stored, which you can verify by turning off your Wi-Fi.
What do I paste into my CSS?
Custom properties like --text-lg in rem, which stay consistent across your site and respect the user's root font size.
Limits
Generates sizes from one ratio; per-step manual overrides are left to you.
Related
The font pairing previewer suggests families; the Tailwind shade generator builds colour scales.
Bookmark this page (Ctrl+D, or ⌘D on Mac) or install the app — it works offline the next time you need it.