Typography Scale Generator

Generate typographic scales with ratios

Scale Settings

16px
1.333
8

Scale Presets

Generated Scale

xs9px
sm12px
base16px
lg21.3px
xl28.4px
2xl37.9px
3xl50.5px
4xl67.3px
5xl89.8px
6xl119.7px
8xl159.5px

Live Preview

8XL - 159.5px
6XL - 119.7px
5XL - 89.8px
4XL - 67.3px
3XL - 50.5px

Generated CSS Variables

:root {
  --font-size-xs: 9px;
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-lg: 21.3px;
  --font-size-xl: 28.4px;
  --font-size-2xl: 37.9px;
  --font-size-3xl: 50.5px;
  --font-size-4xl: 67.3px;
  --font-size-5xl: 89.8px;
  --font-size-6xl: 119.7px;
  --font-size-8xl: 159.5px;
}