Type Scale Calculator
Generate a modular type scale from a base font size and ratio, with px, rem, line heights and ready-to-paste CSS variables.
| Step | px | rem | Line height | CSS variable |
|---|
Preview
CSS custom properties
How it works
A modular type scale multiplies (or divides) a base font size by a fixed ratio for every
step, so every heading and every bit of small print is mathematically related to your body
text. Pick a base size — 16px is the browser default — choose a ratio such as 1.25 (Major
Third) or 1.618 (Golden Ratio), and say how many steps you need above and below the base.
Each step is calculated as base × ratio^n, rounded to two decimals in px and
three decimals in rem, so 16px at 1.25 gives 20px, 25px, 31.25px going up and 12.8px, 10.24px
going down.
The table shows px, rem and a suggested line height for every step: big text gets tighter
leading and small text gets more, which is what typographers do by hand. The generated CSS
uses custom properties like --font-size-1 for steps above the base and
--font-size-n1 for steps below it, so you can paste the block straight into your
stylesheet and reference the variables anywhere. rem values are divided by the root font size
you set (16px by default), while em values are relative to the base size. Everything is
calculated in your browser with plain JavaScript — nothing is uploaded, and there are no ads
or sign-ups.
Frequently asked questions
What is a good type scale ratio?
For body-text-heavy pages a small ratio keeps things readable: 1.125 (Major Second) or 1.2 (Minor Third) are safe defaults. Marketing pages and editorial layouts can carry more contrast, so 1.25 (Major Third) and 1.333 (Perfect Fourth) are the most popular web choices. Ratios of 1.5 (Perfect Fifth) and 1.618 (Golden Ratio) produce dramatic headlines but grow very fast — at 16px base, 1.618 reaches 110px by the fifth step, so use fewer steps or a smaller base with them. On narrow screens people often keep the same base size but drop a step or two of contrast.
How do I calculate a modular type scale?
Pick a base font size (16px is the browser default) and a ratio, then multiply for each step up and divide for each step down: size = base × ratio^n. With a 16px base and a 1.25 ratio you get 20px, 25px, 31.25px and 39.06px going up, and 12.8px and 10.24px going down. This calculator does the maths for as many steps as you need and shows every value in px and rem at once, so you never have to compound the multiplication by hand.
Should I use px or rem for font sizes?
rem is the safer default for text: it is relative to the root font size, so readers who raise their browser's default font size actually see larger text, which px overrides. Use the rem column for font sizes and keep px for things that should not scale, such as hairline borders. This tool outputs px, rem or em — rem values are divided by the root font size you set (16px by default) and em values are relative to the base size, so a scale built here works whichever unit your design system uses.