Type Scale Generator

A type scale generator for static and fluid font sizes

A type scale generator turns two numbers — a base font size and a ratio — into a full set of harmonious sizes for body text, headings, captions and small print. Multiply by the ratio to go up a step, divide to go down. With a 16 px base and the major third ratio (1.25) you get 20, 25, 31.25 and 39.06 px going up and 12.8 and 10.24 px going down: sizes that feel related because each is the same proportion larger than the last.

This tool calculates the scale instantly, previews it in real text, and writes the code you need: CSS custom properties, SCSS variables with a map, or a Tailwind fontSize config. Switch on fluid type and every step becomes a clamp() value that grows smoothly from a small-screen scale to a large-screen scale, so headings stay readable on a phone without looking timid on a 27-inch monitor.

It is for designers setting up a design system, developers who want consistent sizes instead of a pile of magic numbers, and anyone tuning a blog theme. Everything is calculated in your browser.

How to use the Type Scale Generator

1. Enter the Base size — usually your body text size, 16 px in most browsers — and choose a Scale ratio such as Major third (1.25), or pick Custom.
2. Set how many Steps up (headings) and Steps down (small text) you need, and choose rem or px output. Change the root font size if your site sets html { font-size } to something other than 16 px.
3. Tick Fluid type to enter a minimum and maximum viewport with a base size and ratio for each end; the code switches to clamp().
4. Check the preview and the table, choose names (steps or T-shirt sizes) and an export format.
5. Press Copy code or Download and paste it into your stylesheet or Tailwind config.

Type Scale Generator features

How the modular scale is calculated

Step n of a modular scale is base × ration. Negative steps divide instead of multiply. Rounding happens only at the end, so step 4 of 16 × 1.25 is 16 × 1.25⁴ = 39.0625 px, shown as 39.063 px at three decimals. For rem output each value is divided by the root size: 31.25 px ÷ 16 = 1.953 rem.

How fluid clamp() sizes work

In fluid mode each step has a size at the minimum viewport (a) and at the maximum viewport (b). The tool draws a straight line between those two points: slope = (b − a) ÷ (max viewport − min viewport) and intercept = a − slope × min viewport. The CSS is clamp(a, intercept + slope × 100vw, b), so the size is fixed below the minimum viewport, fixed above the maximum and grows linearly in between.

Worked example: 16 px at 320 px wide and 20 px at 1,240 px. The slope is 4 ÷ 920 = 0.004348, which is 0.4348vw; the intercept is 16 − 0.004348 × 320 = 14.61 px = 0.913 rem. Result: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem). Because the intercept is in rem, the size still responds when a visitor zooms or changes their default font size, which pure vw values do not — an accessibility requirement under WCAG 1.4.4 Resize text.

Using a smaller ratio at the minimum viewport and a larger one at the maximum keeps phone headings compact while letting desktop headings breathe. Convert single values with the PX to REM Converter.

Choosing a scale

• Text-heavy interfaces need small ratios (1.125–1.2); otherwise six heading levels quickly become huge.
• Marketing pages with one big headline can use 1.333 or more, often with fewer steps.
• Keep body copy at step 0 and use one or two steps down for captions, labels and legal text — not smaller than about 12 px.
• Pair the scale with fonts that suit it; the Font Pairing Previewer shows heading and body fonts together, and the Golden Ratio Calculator helps with matching spacing.