Typography Scale Generator

About Typography scale generator

A modular scale multiplies a base font size by a fixed ratio to produce headings and text sizes that relate to each other. Choose a base size and one of eight named ratios, and the tool lists up to eight steps with a live Ag specimen, then exports them as CSS custom properties.

How to use it

1. Set the Base size between 12 and 24 pixels.
2. Choose a Scale ratio from the list, from Minor Second (1.067) to Golden Ratio (1.618).
3. Use Steps to choose how many sizes to show, from 4 to 8.
4. Switch the unit between px and rem.
5. Copy the :root block from Generated CSS.

Major Third from a 16 px base, in rem

Base 16, ratio 1.25, 8 steps, rem

--text-xs: 0.640rem;
--text-sm: 0.800rem;
--text-base: 1.000rem;
--text-lg: 1.250rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;

When to use it

• Choosing heading sizes for a blog or documentation theme in one pass.
• Comparing a tight ratio for dense interfaces against a bold ratio for marketing pages.
• Producing custom properties to paste into a design-token file.
• Explaining to a client why h1 through h4 sizes were chosen.

Questions about Typography scale generator

How is each size calculated?

Size equals base times ratio to the power of the step index minus two. That puts base at the third position, with xs and sm below it and lg upward above it.

Which names do the steps get?

xs, sm, base, lg, xl, 2xl, 3xl and 4xl, in that order. With 4 steps you only get xs, sm, base and lg.

How does rem conversion work?

Each pixel size is rounded to two decimals and divided by 16, shown to three decimals. If you change the base size the rem values shift with it, since 16 px is treated as 1rem.

Which ratio should I choose?

Small ratios like 1.125 give gentle steps that suit app UI. Larger ones like 1.5 or 1.618 create dramatic contrast, which suits landing pages.

Related tools

• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element
• Text shadow generatorLayer multiple text-shadows with color, offset, and blur controls — includes glow, retro, and fire presets
• Color shades generatorGenerate a full 50–950 shade scale from any color — export as CSS variables or Tailwind config
• Spacing scale generatorBuild a design-token spacing scale from a base unit — exports CSS custom properties
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview