CSS · Design

Typography Scale Generator

Pick a base size and scale ratio to generate type steps and export CSS variables.

XS10.24px / 0.6400rem
SM12.80px / 0.8000rem
Base16.00px / 1.0000rem
LG20.00px / 1.2500rem
XL25.00px / 1.5625rem
2XL31.25px / 1.9531rem
3XL39.06px / 2.4414rem
4XL48.83px / 3.0518rem
5XL61.04px / 3.8147rem
Scale ratio
:root {
  --text-xs: 10.24px; /* 0.64rem */
  --text-sm: 12.8px; /* 0.8rem */
  --text-base: 16px; /* 1rem */
  --text-lg: 20px; /* 1.25rem */
  --text-xl: 25px; /* 1.5625rem */
  --text-2xl: 31.25px; /* 1.9531rem */
  --text-3xl: 39.06px; /* 2.4414rem */
  --text-4xl: 48.83px; /* 3.0518rem */
  --text-5xl: 61.04px; /* 3.8147rem */
}

How to use

  1. Set base font size and choose a scale ratio.
  2. Preview each step at its computed size.
  3. Copy the :root CSS variable block.

Features

  • Ratios: 1.125, 1.2, 1.25, 1.333, 1.5, 1.618
  • Live size preview
  • Export CSS variables
  • Runs in your browser. Colors and images are not uploaded to ToolsWeb servers.

Privacy & how it works

This design utility runs in your browser. Colors, CSS, and images you enter are not uploaded to ToolsWeb servers for this tool. Privacy Policy.

FAQ

Which ratio should I use?expand_more

1.25 (major third) is a common UI default. 1.618 (golden ratio) gives more dramatic contrast between steps.

Is this tool free?expand_more

Yes. No signup and no paywall for core use.

Is my text uploaded?expand_more

No for this tool. Text stays in your browser while you work.

Do I need an account?expand_more

No. Open the page and start typing or pasting.

Related tools