Modular Type Scale
Consistent typography starts with a scale. Pick a base size and a ratio, get exact px values and CSS custom properties to paste into your design tokens.
Runs entirely in your browser — no upload, no registration.
--fs-0 · 16pxType sample
--fs-1 · 21.33pxType sample
--fs-2 · 28.43pxType sample
--fs-3 · 37.9pxType sample
--fs-4 · 50.52pxType sample
--fs-5 · 67.34pxType sample
CSS
:root {
--fs-0: 16px;
--fs-1: 21.33px;
--fs-2: 28.43px;
--fs-3: 37.9px;
--fs-4: 50.52px;
--fs-5: 67.34px;
}What this tool does
A modular scale multiplies your base size by a chosen ratio at each step. Consistent ratios create rhythm across headings, body copy and small text.
Why you might need it
Ad-hoc font sizes make interfaces feel noisy. A scale gives every heading level a predictable relationship.
How to use it
- Set your base font size (usually 16 px).
- Choose a ratio — Perfect Fourth for punchy hierarchy, Major Third for calmer rhythm.
- Copy the CSS custom properties into your stylesheet.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.