Build a modular typography scale
Build a modular type scale from a base size and ratio (Minor Third, Golden Ratio, and more), with a live preview at each step.
The base is usually your body text size; the ratio is how much bigger each step up gets.
Steps up cover headings, steps down cover captions and small print.
Every step is shown at its actual size, plus a block of CSS custom properties you can paste straight into :root.
Frequently asked
What is a modular type scale?
A set of font sizes generated by repeatedly multiplying a base size by a fixed ratio, so every size relates to the others by the same proportion. It's a common way to keep a design's typography consistent instead of picking sizes arbitrarily.
Which ratio should I use?
Smaller ratios like Minor Second (1.067) give subtle, closely-spaced sizes, good for dense UIs. Larger ratios like Golden Ratio (1.618) give dramatic jumps between sizes, better suited to editorial or marketing pages. There's no single right answer, try a few against your actual content.
Why are the values also shown in rem?
rem values scale with the browser's root font size, which respects a user's accessibility zoom/text-size settings. Most modern CSS uses rem for font sizes rather than a fixed px value for that reason.