Type Scale Generator
NewGenerate a modular typography scale (heading sizes) from a base font size and a musical/classical scale ratio, with CSS custom properties output.
A modular scale multiplies the base font size by a fixed ratio for each step (size = base × ration), the same technique used in classical typography and design systems to create a harmonious, consistent size hierarchy instead of arbitrary heading sizes.
Frequently Asked Questions
What is a "modular scale" in typography?
A modular scale generates a sequence of font sizes by repeatedly multiplying a base size by a fixed ratio (size = base × ratio^n) — the same mathematical principle behind musical intervals (hence names like "Perfect Fourth" or "Major Third"), producing a size hierarchy that feels visually harmonious rather than arbitrary.
Which ratio should I choose?
Smaller ratios (1.067–1.2) produce more subtle, closely-spaced sizes suited to dense UI/body text hierarchies. Larger ratios (1.333–1.618) produce more dramatic size jumps suited to editorial/marketing headlines. There's no universally "correct" ratio — it's a design choice, though 1.25 (Major Third) is a commonly used, balanced default.
Why does the output use CSS custom properties instead of direct font-size rules?
Defining the scale as :root custom properties (--fs-0, --fs-1, etc.) lets you reference the same scale consistently across your entire stylesheet (font-size: var(--fs-3);) without repeating or hardcoding pixel/rem values in multiple places, and makes it trivial to swap the whole scale later by changing the custom properties alone.
Why are the values shown in both px and rem?
px is easier to reason about visually (matching what you see in a design tool), while rem is the unit actually used in the generated CSS, since rem scales correctly with a user's browser font-size accessibility setting whereas a fixed px value would not.
How many steps should I generate?
Six steps above the base (covering roughly h6 through h1 plus a couple of larger display sizes) covers most typical page hierarchies; you can generate up to 10 steps if you need additional larger display/hero sizes.