Typography Scale Calculator
Pick a base size and a ratio and get a full modular type scale in px and rem, ready-to-paste CSS variables, and fluid clamp() sizes for the heading steps. Every number below is computed from your inputs with one formula: base x ratio raised to the step.
16px is the browser default. Change it only if your CSS sets a different root size.
| Typical role | px | rem | |
|---|---|---|---|
| -2 | Microcopy (use with care) | 10.24 | 0.64 |
| -1 | Caption, timestamp | 12.8 | 0.8 |
| 0 | Body text | 16 | 1 |
| 1 | H4, card title | 20 | 1.25 |
| 2 | H3 | 25 | 1.5625 |
| 3 | H2 | 31.25 | 1.9531 |
| 4 | H1 | 39.06 | 2.4414 |
| 5 | Display | 48.83 | 3.0518 |
CSS variables for this scale
:root {
--text-step-n2: 0.64rem; /* 10.24px */
--text-step-n1: 0.8rem; /* 12.8px */
--text-step-0: 1rem; /* 16px */
--text-step-1: 1.25rem; /* 20px */
--text-step-2: 1.5625rem; /* 25px */
--text-step-3: 1.9531rem; /* 31.25px */
--text-step-4: 2.4414rem; /* 39.06px */
--text-step-5: 3.0518rem; /* 48.83px */
}Fluid heading sizes with clamp()
For steps 2 and up, this generates a clamp() that grows in a straight line from a smaller size on a narrow screen to the full scale size on a wide screen, using the slope and intercept method set out below the tool. Body text and captions stay fixed: fluid body text fights the reader's own browser settings.
:root {
--text-h3-fluid: clamp(1.1719rem, 1.019rem + 0.6793vw, 1.5625rem); /* 18.75px at 360px wide to 25px at 1280px wide */
--text-h2-fluid: clamp(1.4648rem, 1.2738rem + 0.8492vw, 1.9531rem); /* 23.44px at 360px wide to 31.25px at 1280px wide */
--text-h1-fluid: clamp(1.8311rem, 1.5922rem + 1.0615vw, 2.4414rem); /* 29.3px at 360px wide to 39.06px at 1280px wide */
--text-display-fluid: clamp(2.2888rem, 1.9903rem + 1.3269vw, 3.0518rem); /* 36.62px at 360px wide to 48.83px at 1280px wide */
}Worked example at the defaults: step 4 is 39.06px. At 75% its small-screen size is 29.3px. Slope = (39.06 - 29.3) / (1280 - 360) = 0.010615, or 1.0615vw. Intercept = 29.3 - 0.010615 x 360 = 25.48px, or 1.5922rem. So the H1 line reads clamp(1.8311rem, 1.5922rem + 1.0615vw, 2.4414rem). Check any line the same way with the formulas in the explainer below.
How the typography scale calculator works
A modular type scale is a set of font sizes where each size is the base size multiplied by the same ratio a set number of times. Step 0 is the base. Step 1 is base x ratio, step 2 is base x ratio squared, step -1 is base divided by the ratio, and so on. Because every size comes from the same formula, two pieces of text are either the same size or at least one full step apart, which is what gives a page a hierarchy a reader can feel without counting pixels. This calculator runs that one formula for steps -2 to 5, converts each result to rem against the root size you set, and writes the results as CSS variables. It runs in your browser; nothing you enter is sent anywhere.
The default scale, worked in full
At the defaults (16px base, 1.25 ratio, 16px root) the calculator produces this table. Every row is 16 x 1.25 raised to the step, and the rem column is the px value divided by 16:
| Step | Calculation | px | rem | Typical role |
|---|---|---|---|---|
| -2 | 16 / 1.25 / 1.25 | 10.24 | 0.64 | Microcopy, rarely used |
| -1 | 16 / 1.25 | 12.8 | 0.8 | Captions, timestamps |
| 0 | base | 16 | 1 | Body text, form inputs |
| 1 | 16 x 1.25 | 20 | 1.25 | H4, card titles |
| 2 | 16 x 1.25^2 | 25 | 1.5625 | H3 |
| 3 | 16 x 1.25^3 | 31.25 | 1.9531 | H2 |
| 4 | 16 x 1.25^4 | 39.06 | 2.4414 | H1 |
| 5 | 16 x 1.25^5 | 48.83 | 3.0518 | Display |
Step -2 at this ratio is 10.24px, which is too small for anything a reader has to read. Many teams cut the scale off at -1 and use weight or color for anything that needs to look quieter.
Choosing a ratio: the eight presets compared at a 16px base
Most of the common named ratios take their names from musical intervals; the golden ratio is the exception. Their values are plain fractions, so you can check them with a calculator. The column that matters is the last-but-one: how large the fifth step gets decides whether a ratio can carry a full set of headings at all.
| Ratio name | Fraction | Value | One step from 16px | Five steps from 16px | Where it tends to fit |
|---|---|---|---|---|---|
| Minor second | 16/15 | 1.067 | 17.07px | 22.1px | Dense data tables, admin tools |
| Major second | 9/8 | 1.125 | 18px | 28.8px | Quiet product UI with many levels |
| Minor third | 6/5 | 1.200 | 19.2px | 39.8px | General product UI, documentation |
| Major third | 5/4 | 1.250 | 20px | 48.8px | Product plus marketing pages |
| Perfect fourth | 4/3 | 1.333 | 21.33px | 67.4px | Editorial layouts, landing pages |
| Augmented fourth | sqrt(2) | 1.414 | 22.63px | 90.5px | Bold editorial, few heading levels |
| Perfect fifth | 3/2 | 1.500 | 24px | 121.5px | Posters, hero-led pages |
| Golden ratio | (1+sqrt(5))/2 | 1.618 | 25.89px | 177.4px | Single hero statements, two or three levels |
At 1.618 the fifth step is 177.4px, which no interface can use, so golden-ratio scales only work with two or three levels. At 1.067 the fifth step is 22.1px, barely larger than body text, so the hierarchy has to come from weight and color instead of size.
How the fluid clamp() values are derived
MDN documents clamp() as clamp(MIN, VAL, MAX), which resolves as max(MIN, min(VAL, MAX)): the preferred value is used while it sits between the two bounds. The preferred value here is a straight line between two points: the smaller size at the narrow viewport and the full scale size at the wide viewport. Slope = (full size - small size) / (wide viewport - narrow viewport), expressed in vw by multiplying by 100. Intercept = small size - slope x narrow viewport, converted to rem against your root size. The tool page works one example in full next to the output, and the typography scale system guide derives the same values step by step, covers line height and measure, and shows what two shipping design systems (Material Design 3 and IBM Carbon) actually use, since real systems start from a ratio and then hand-tune the steps.
Assumptions and limits
The calculator assumes one base, one ratio and one root size. It does not pick a typeface, set line heights, or check contrast: pair it with the contrast checker for color decisions, the px to rem converter for single values from a design file, and the variable fonts guide if your scale will be set in a variable font with a weight axis. Preview sizes in the table are capped at 56px on screen so a large display step does not break the page layout; the px and rem values in the table are always exact. If you set a root size other than 16px, the rem column follows your root, which is correct for your stylesheet and wrong for anyone else's: say which root the tokens assume when you hand them over.
Cite this tool
If this calculator or its ratio comparison table is useful in an article or a design-system document, link to https://lucky.graphics/tools/type-scale-calculator/ . The method, the preset fractions and the worked tables are all on this page, so a reader following your link can check every number.
Questions
What ratio should I pick for a product interface?
1.2 (minor third) or 1.25 (major third) is the range most interface work lands in, because five steps up from a 16px base reach 39.8px or 48.8px: large enough for a clear H1, small enough to fit a screen. Pick a lower ratio when the screen is crowded with small text, and a higher one for reading-led pages. No specification names a best ratio; this is a design judgment, and the table on this page shows the arithmetic behind it.
Why does the calculator stop fluid sizing at step 2?
clamp() here is for headings, steps 2 and up. Body text that changes size with the viewport width works against readers who set a larger default font size in their browser, and it can still break layouts at 200% zoom. Keep body and caption sizes fixed in rem, and test fluid headings at 200% zoom and with the WCAG 2.2 text-spacing overrides applied.
Should I round the scale values?
Yes, for the final tokens. Nobody can see the difference between 39.06px and 39px, and whole or half pixels are easier to discuss in a review. The calculator shows exact values so the step relationship stays visible; round when you copy the tokens into production, and round consistently.
What is the difference between this and the px to rem converter?
The px to rem converter converts one size at a time against a root size. This calculator generates the whole set of sizes at once from a base and a ratio, then writes the CSS variables and the fluid clamp() versions for you. Use the converter for a single value from a design file; use this page when you are setting up or changing a type system.
Sources: MDN Web Docs, CSS clamp() function reference (https://developer.mozilla.org/en-US/docs/Web/CSS/clamp), checked October 26, 2026; ratio fractions are standard musical-interval ratios (16/15, 9/8, 6/5, 5/4, 4/3, 3/2) and the golden ratio (1 + sqrt(5)) / 2, each verifiable with a pocket calculator against the px columns above. Method cross-checked against this site's typography scale system guide, updated October 22, 2026.