Typography Scale Generator

Generate type scales with musical ratios. CSS vars, Tailwind config, JSON.

Base size: 16px

Ratio: 1.333

Steps up: 6

Steps down: 2

Live preview

5xlThe quick brown fox5.61rem

4xlThe quick brown fox4.209rem

3xlThe quick brown fox3.157rem

2xlThe quick brown fox2.369rem

xlThe quick brown fox1.777rem

lgThe quick brown fox1.333rem

baseThe quick brown fox1rem

smThe quick brown fox0.75rem

xsThe quick brown fox0.563rem

:root {
  --font-size-xs: 0.563rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.333rem;
  --font-size-xl: 1.777rem;
  --font-size-2xl: 2.369rem;
  --font-size-3xl: 3.157rem;
  --font-size-4xl: 4.209rem;
  --font-size-5xl: 5.61rem;
}