Type Scale Generator
Build a modular typography scale from a base size and ratio — live preview, px/rem table and copy-ready CSS variables.
596 views
Why a Modular Scale
Instead of picking heading sizes by eye, a modular scale multiplies a base size by a fixed ratio per step: base 16 px with a 1.25 (major third) ratio gives 20, 25, 31.3, 39.1, 48.8... Sizes relate musically, and the whole hierarchy stays consistent — change the base or ratio and everything re-tunes together.
Common ratios: 1.125 (major second — dense UI), 1.25 (major third — the safe default), 1.333 (perfect fourth — editorial), 1.618 (golden — dramatic, needs few levels). The generated CSS custom properties drop straight into your stylesheet; rem values assume a 16 px root.
Frequently Asked Questions
Which ratio should I pick?
Product/UI work usually sits at 1.125-1.25 (headings not much bigger than body); marketing and editorial pages carry 1.333-1.618 well. If h1 feels shouty, step the ratio down rather than hand-tuning one size.
Why does the scale go below the base?
Negative steps (base ÷ ratio) give captions and fine print that belong to the same system — 12.8 px under a 16/1.25 scale instead of an arbitrary 13.
Should I use px or rem?
rem in the CSS: users who raise their browser font size get a proportionally larger scale. The px column is for design-tool mockups.
Similar Tools
Report a Problem
Type Scale Generator