PapaTools

Free Typography Scale Generator

5.61rem--5xlThe quick fox
4.21rem--4xlThe quick fox
3.16rem--3xlThe quick fox
2.37rem--2xlThe quick fox
1.78rem--xlThe quick fox
1.33rem--lgThe quick fox
1rem--baseThe quick fox
0.75rem--smThe quick fox
0.56rem--xsThe quick fox
0.42rem--2xsThe quick fox
:root {
  --text-2xs: 0.42rem;
  --text-xs: 0.56rem;
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-lg: 1.33rem;
  --text-xl: 1.78rem;
  --text-2xl: 2.37rem;
  --text-3xl: 3.16rem;
  --text-4xl: 4.21rem;
  --text-5xl: 5.61rem;
}

Something not working? Report a problem

About the Typography Scale Generator

Pick a base font size and a modular ratio to generate a complete type scale — preview every step rendered live and copy the CSS custom properties, all in your browser.

How to use the Typography Scale Generator

  1. 1Set your base font size (the body text size, usually 16px).
  2. 2Choose a modular ratio — larger ratios create more dramatic size jumps.
  3. 3See each scale step rendered live with its size and line-height.
  4. 4Copy the generated CSS custom properties and add them to your stylesheet.

Frequently asked questions

What is a modular type scale?

A modular scale multiplies a base size by a fixed ratio for each step. This ensures visual harmony — every heading size is mathematically related to the body text rather than picked arbitrarily.

Which ratio should I use?

Minor Third (1.2) and Perfect Fourth (1.333) are popular for web interfaces. Major Third (1.25) and Golden Ratio (1.618) work well for editorial sites. Smaller ratios look calmer; larger ones are more dramatic.

What do the step numbers mean?

Step 0 is your base size. Positive steps (1, 2, 3…) are larger — used for headings. Negative steps (-1, -2) are smaller — used for captions and helper text.

Is this tool client-side only?

Yes — all computation happens in the browser. Nothing is sent to a server.

More design tools

View all
CSS Gradient GeneratorBuild linear, radial or conic CSS gradients visually — add colour stops, set direction and angle, get instant preview and copy the ready-to-paste CSS, all in your browser.Box Shadow GeneratorCreate single or layered CSS box shadows with live controls for offset, blur, spread, colour and inset — preview on a card and copy the CSS in one click.Color Palette GeneratorGenerate a 5-colour palette from a seed colour (complementary, analogous, triadic and more) or extract dominant colours from any image — copy hex/RGB/HSL or download as a PNG swatch sheet.Contrast CheckerCheck foreground/background colour contrast against WCAG 2.1 AA and AAA — live preview text on the chosen background with a one-click fix for failing combinations.