Typography Scale Calculator
Choose a base size and a musical ratio to generate a modular type scale — each step in px and rem with a suggested line-height, a live size preview, and the whole scale as copyable CSS custom properties. A px↔rem↔em converter with a configurable root size sits below.
Build your scale
| Step | px | rem | Line height | Preview |
|---|---|---|---|---|
| 4 | 39.06 | 2.441 | 1.2 | Aa |
| 3 | 31.25 | 1.953 | 1.2 | Aa |
| 2 | 25 | 1.563 | 1.27 | Aa |
| 1 | 20 | 1.25 | 1.4 | Aa |
| 0 | 16 | 1 | 1.5 | Aa |
| -1 | 12.8 | 0.8 | 1.58 | Aa |
| -2 | 10.24 | 0.64 | 1.6 | Aa |
CSS custom properties
:root {
--step-4: 2.441rem; /* 39.06px */
--step-3: 1.953rem; /* 31.25px */
--step-2: 1.563rem; /* 25px */
--step-1: 1.25rem; /* 20px */
--step-0: 1rem; /* 16px */
--step--1: 0.8rem; /* 12.8px */
--step--2: 0.64rem; /* 10.24px */
}px ↔ rem ↔ em converter
Set this type scale on a Moda design
Apply consistent heading and body sizes across decks, documents, and site pages.
Try Moda free →How a modular scale works
A modular scale multiplies a base size by a fixed ratio repeatedly: with 16px and a major third (1.25), the steps run 16, 20, 25, 31.25… and downward 12.8, 10.24. Because every size derives from one rule, any two sizes on the page relate harmoniously — the same reason musical intervals sound consonant, which is where the ratio names come from. Small ratios (minor second, major second) suit dense product UIs where you need many close sizes; large ratios (perfect fifth, golden) create dramatic editorial hierarchy with fewer usable steps.
When to use rem, em, and px
rem is relative to the root font size and is the right default for font sizes: users who raise their browser’s base size get proportionally larger text, which px silently ignores. em is relative to the current element’s own font size, which makes it right for things that should track the text they sit inside — padding on a button, an icon beside a label — but risky for nested font sizes, where ems compound (1.2em inside 1.2em is 1.44× the root). px remains legitimate for things that should not scale with text: borders, shadows, and fixed chrome. The converter’s root-size control matters because rem values assume 16px unless your CSS changes it.
Line height across the scale
Body text is most readable around 1.5-1.6 line height, but headlines set that loose look detached and gappy — display sizes want 1.1-1.2. The suggestions here ease from 1.6 at small sizes down to 1.2 at 28px and above, matching that standard guidance, and they are emitted unitless. Unitless is deliberate: a unitless line-height recomputes against each element’s own font size, while a fixed px or em line-height inherited from a parent produces the classic overlapping-headline bug.
Frequently asked questions
Which ratio should I pick?
For product UI and dashboards, a major second (1.125) or minor third (1.2) keeps sizes close enough to get a full hierarchy in limited space. For marketing and editorial pages, a perfect fourth (1.333) or larger gives headlines real presence. When unsure, the major third (1.25) is the most versatile middle ground — its steps from 16px land near the sizes most design systems hand-pick anyway.
Why do the rem values assume a 16px root?
Browsers default the root font size to 16px, so 1rem = 16px unless your CSS overrides html { font-size }. If you use the 62.5% trick (making 1rem = 10px), set the root size control to 10 and both the scale table and the converter recompute everything against it.
Should I use these exact fractional px values?
Ship the rem values, not rounded px — the px column is a readability aid. Browsers render fractional sizes fine, and rounding each step by hand slowly destroys the ratio relationship that makes the scale cohesive. If a step must be a whole number for a legacy system, round it and accept the tiny drift.
What do the --step-N custom properties give me?
A drop-in token set: paste the :root block into your CSS and use font-size: var(--step-2) for headings, var(--step-0) for body, negative steps for captions. Renaming them to semantic tokens (--font-size-heading) later is a find-and-replace, and the px comments document what each resolves to at your root size.