CSS Type Scale Generator

Generate modular typography scales for consistent text sizing in design systems.

Base Font Size

Scale Ratio

Steps Above

Steps Below

Output Unit

Scale Preview

3.815rem

--text-4xl

3.052rem

--text-3xl

2.441rem

--text-2xl

1.953rem

--text-xl

1.563rem

--text-lg

1.250rem

--text-md

base

1.000rem

--text-base

-1

0.800rem

--text-sm

-2

0.640rem

--text-xs

Code Output

:root {
  --text-xs: 0.6400rem;
  --text-sm: 0.8000rem;
  --text-base: 1.0000rem;
  --text-md: 1.2500rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-3xl: 3.0518rem;
  --text-4xl: 3.8147rem;
}

Loading tool...