Type Scale Calculator

How to use it

1. Set your base size, usually 16px, which becomes your body text.
2. Pick a ratio. Small for dense UI, large for editorial contrast.
3. Choose how many steps up (headings) and down (captions) you need.
4. Copy the CSS variables and use var(--text-lg) across your components.

Why a ratio beats hand-picked sizes

A pile of sizes chosen by feel (14, 16, 22, 31, 40) reads as noise: the jumps are uneven, so headings fight instead of forming a clear order. A modular scale fixes the relationship in one number. Every size is the base times the ratio to some power, so H1 relates to H2 relates to body the same way a musical interval does. The result is a hierarchy your eye trusts without knowing why. Ship the tokens once and every heading on every page inherits that harmony.

Two real scales: a dashboard and a marketing page

Same product, two very different jobs, two different ratios. Start with the dashboard. Base 14px, ratio 1.2, four steps up and one down. That produces roughly 11.7, 14, 16.8, 20.2, 24.2 and 29 pixels. Body copy sits at 14px because the screen is dense and 16px pushes table rows apart enough to cost you a visible row on a laptop. Table headers take 11.7px with a bump in weight and some letter spacing. Card titles land at 16.8px. The page title takes 20.2px, and 24.2px is reserved for the one big number in each metric tile.

Notice what I did not use. The 29px step exists in the tokens and never appears in the dashboard at all. A dashboard rewards small, controlled contrast, because the data is the content and the chrome should get out of the way. Big type in an analytics view mostly signals that a designer was bored.

Now the marketing page for the same product. Base 18px, ratio 1.333, five steps up. That gives 18, 24, 32, 42.6, 56.8 and 75.7 pixels. Body copy goes to 18px because people read paragraphs here rather than scanning cells. Section headings take 32px. The hero headline takes 56.8px on desktop, and I clamp it down to about 34px on a 375px viewport, which works out near the 42.6px step scaled by viewport width. That single headline does more work than the entire dashboard type system.

Here's the part people skip. The two scales share a base font family and share the same rem root, so a component lifted from one context into the other still lines up on the vertical grid. What changes is the ratio, not the foundation. I think shipping one ratio for an entire product is a mistake, and I'll defend that: a pricing page and a settings panel have genuinely opposite jobs, and forcing them to share a contrast curve makes one of them worse.

Where scales go wrong

The first failure is generating too many steps and then using all of them. A 1.2 ratio with eight steps up gives you sizes 4 percent apart in the middle of the range, and nobody can tell 20.2px from 21px. If two adjacent tokens are indistinguishable in a real layout, delete one. Six or seven total sizes covers almost every product I've worked on.

Second, ignoring line height. A scale gives you font sizes and says nothing about leading, which is where most of the readability lives. My default is a line height near 1.6 for body copy, tightening as sizes grow: around 1.4 at 24px, around 1.15 at 48px and above. A 56px headline set at 1.6 looks like a list of separate sentences, not a headline. Set leading as a ratio per size band, not a single global number.

Third, rounding at the wrong time. If you round each step to whole pixels and then compute the next step from the rounded value, error compounds and the top of your scale drifts noticeably. Always compute from the base and the power, then round for display only. This tool does that, which is why the rem values carry three decimals.

Fourth, ratio contrast without weight contrast. Two sizes 1.25 apart with identical weight and color read as almost the same thing. Real hierarchy comes from size, weight, color, and spacing working together, and the scale only supplies one of those four.

When the ratio stops being the right tool

Very small text breaks the math. Below about 12px, a 1.25 ratio hands you 11.2 then 9 pixels, and 9px is not text, it's texture. Set a hard floor at 12px for anything a user must read, and stop generating steps below it even if the ratio would happily keep going.

Fluid type is the other place. Once you use a viewport-based clamp, each size sweeps a range rather than sitting at one value, so two adjacent steps can cross over at some window width if you clamp them carelessly. The fix is to clamp the whole scale with the same minimum and maximum viewport bounds, so every size moves together and the order never inverts.

Mixed font families also break the illusion. Two typefaces set at the same 16px can differ by 15 percent in x-height, so a serif body next to a geometric sans UI label will look mismatched despite identical numbers. Adjust with a per-family size offset rather than nudging individual tokens.

From tokens to shipped product

Put the generated variables in one typography tokens file and give the steps semantic aliases on top: a body token, a heading token per level, a caption token. Components reference the aliases, never the raw step. That indirection is what lets you swap a ratio later without touching a hundred component files, and it's the single highest-value thing in this whole workflow.

In Tailwind, override the fontSize theme key so each named size points at your variable and carries its matching line height in the same entry, which stops leading from drifting per component. In Figma, mirror the scale as text styles named identically to the tokens, and set the collection so a theme switch updates every layer at once. When designers and engineers say the same word for the same size, the handoff review gets shorter than the meeting invite.

Common questions

What is a modular type scale?

A modular type scale is a set of font sizes generated from one base size multiplied by a fixed ratio. Each step up multiplies by the ratio, each step down divides by it. It gives you headings that relate to the body text and to each other mathematically, instead of eyeballed sizes that clash.

Which ratio should I pick?

Smaller ratios (1.2 to 1.25) suit dense product UI and dashboards where you need many sizes close together. Larger ratios (1.333 to 1.5) create dramatic contrast for editorial and marketing pages. 1.25 (major third) is a safe, versatile default.

Should I use px or rem?

Use rem for font sizes so text respects the user browser setting and stays accessible. The tool shows both: px to sanity-check the visual size, rem for the values you actually ship. Base 16px equals 1rem.

Is it free and private?

Yes. No sign-up, no email, no watermark. The whole calculator runs client-side in your browser, so nothing is uploaded. Copy the CSS variables straight into your stylesheet.

How many type sizes should a design system actually ship?

Six or seven covers most products: one or two small sizes, body, and three or four heading steps. If two adjacent tokens look the same in a real layout, they are the same, and one of them should go. Long scales create decisions instead of removing them.

What line height should go with each step?

Leading should tighten as size grows. Around 1.6 for body copy at 14 to 18px, around 1.4 near 24px, and 1.1 to 1.2 for anything 40px and up. A 56px headline set at 1.6 reads as separate lines rather than one statement, so pair each size band with its own line height rather than using one global value.

Can I use the same type scale for a dashboard and a marketing page?

Share the base and the font family, but not the ratio. Dense product UI wants small contrast, near 1.2, so many sizes can sit close together without shouting. Marketing pages want 1.333 or higher so the hero headline can carry the page. Forcing one ratio on both usually makes the dense screens noisy.

How does a modular scale work with fluid or clamped type?

Generate the scale twice, once for your minimum viewport and once for your maximum, then clamp each token between the two using the same viewport bounds for every step. Clamping steps independently lets two sizes cross over at some window width and invert your hierarchy.

Should the smallest step go below 12px?

No. Set a hard floor at 12px for text a user has to read. A 1.25 ratio will happily generate 9px, but at that size legibility falls apart on real screens and the value only ever becomes a decorative label nobody can use.

Type is one pillar of the craft. Pair this with our web typography and font pairing guide, or set your spacing rhythm with the spacing scale generator.