🎚️ Type Scale Generator
Pick a base size and a ratio (major third, perfect fourth, golden ratio…) and get a harmonious set of heading sizes in px and rem, plus copy-ready CSS variables.
:root {
--font-display: 3.052rem;
--font-h1: 2.441rem;
--font-h2: 1.953rem;
--font-h3: 1.563rem;
--font-h4: 1.25rem;
--font-body: 1rem;
--font-small: 0.8rem;
--font-caption: 0.64rem;
}A modular scale multiplies the base size by a fixed ratio for each step, so headings relate to body text by a consistent proportion — the typographic equivalent of a musical scale. Smaller ratios (1.125–1.25) suit dense UI; larger ones (1.333–1.618) give dramatic editorial contrast. 🔒
How the type scale generator works
A modular scale multiplies the base font size by a fixed ratio for each step up, and divides for each step down — so every size relates to the next by the same proportion, the way notes relate on a musical scale. Choose the base (usually your body size) and a ratio, and the tool computes the full set of steps in both px and rem, previews them, and outputs CSS custom properties you can paste into a stylesheet.
Smaller ratios like 1.125 (major second) or 1.25 (major third) keep headings close in size — good for dense UI and dashboards. Larger ratios like 1.333 (perfect fourth) or 1.618 (golden ratio) create dramatic contrast suited to editorial and marketing pages. There is no single right answer; the value of a scale is consistency, so pick one ratio and apply it everywhere.
Frequently asked questions
What is a modular type scale?
A set of font sizes generated by repeatedly multiplying a base size by a fixed ratio. Because each size is proportionally related to the next, the result feels harmonious — like a musical scale for typography.
Which ratio should I use?
Smaller ratios (1.125–1.25) suit dense interfaces where headings shouldn't dwarf body text; larger ones (1.333–1.618) give bold editorial contrast. Start with 1.25 (major third) if unsure and adjust to taste.
How do I use the CSS output?
Copy the custom properties (--font-h1, --font-body, …) into your :root and reference them with var(--font-h1). Changing the base or ratio and re-copying updates your whole scale at once.
Should the scale use px or rem?
rem is usually the better choice for font sizes because it respects the user's browser text-size setting. The tool gives both; the CSS output uses rem, computed against the root size you set.