Typography Scale Generator

What is Typography Scale Generator?

The Typography Scale Generator turns a base size and a modular ratio into a full, mathematically consistent type scale, with as many larger heading steps and smaller caption steps as you need. Beyond raw font sizes it derives a matching line-height and letter-spacing for every step, plus an optional fluid clamp() expression that interpolates between a mobile and a desktop viewport using a separate mobile ratio. Designers and front-end developers use it to build design-system type tokens, keep sizes consistent, and paste ready-made CSS, Sass, Tailwind, or JSON. Type any custom ratio or pick a classic one, set the base size and unit (px or rem), preview it in your own font-family, then copy the format you need.

How to use Typography Scale Generator

1. Type any custom ratio in the ratio field, or pick a classic one like Perfect Fourth (1.333) from the preset dropdown in settings.
2. Set the base size; this becomes the body text size and the anchor of the scale.
3. In settings, choose how many larger and smaller steps to generate; smaller steps sit below the base for captions and fine print.
4. Tune the base and tight line-height plus the large-text letter-spacing, and enter a font-family to preview the scale in your own typeface.
5. For responsive type, set the min and max viewport widths and a mobile ratio to build a fluid clamp() scale.
6. Switch the output format between CSS variables, fluid clamp(), Sass, Tailwind config, and JSON, then copy the code or any single step's size.

Examples

ratio 1.333, base 16px, 5 up / 1 down

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

base 16px, ratio 1.333, mobile ratio 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

any scale, Tailwind export

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Frequently asked questions

Can I use a custom ratio, not just the presets?

Yes. Type any number in the ratio field, such as 1.2, 1.5, 1.618, or a non-standard value like 1.45. The preset dropdown in settings is only a shortcut that fills the same field, and choosing a value that does not match a preset simply shows Custom.

How do the smaller (negative) steps work?

The scale is anchored at the base size (step 0). Larger steps multiply the base by the ratio, while smaller steps divide by it, producing caption and fine-print sizes below the base such as sm and xs. Set how many larger and smaller steps you want in settings.

How are line-height and letter-spacing calculated?

Line-height eases from your base value at the body size toward a tighter value as text grows larger, and letter-spacing eases from zero at the base toward your large-text value, so big display text is slightly tighter and small text a touch looser. Both curves are adjustable in settings.

What is the fluid clamp() scale?

It builds a font-size: clamp() for each step that grows smoothly between a minimum and a maximum viewport width, using your main ratio at the max width and a separate mobile ratio at the min width. Choose the CSS clamp() output format to export it.

Is any of my data sent to a server?

No. The entire scale, including sizes, line-height, letter-spacing, and the fluid clamp() values, is computed locally in your browser with plain math. Nothing is uploaded, so the tool works offline and keeps your settings private.