Typography scale generator

Generate a modular type scale from a base size and ratio. Outputs rem values, CSS custom properties, and fluid clamp() expressions.

Base size: 16px

Ratio: 1.250

Preview

5xlThe quick brown fox76.3px

4xlThe quick brown fox61.0px

3xlThe quick brown fox48.8px

2xlThe quick brown fox39.1px

xlThe quick brown fox31.3px

lgThe quick brown fox25.0px

mdThe quick brown fox20.0px

baseThe quick brown fox16.0px

smThe quick brown fox12.8px

xsThe quick brown fox10.2px

xs-2The quick brown fox8.2px

xs-3The quick brown fox6.5px

CSS custom properties

:root {
  --text-xs-3: 0.4096rem; /* 6.5px */
  --text-xs-2: 0.5120rem; /* 8.2px */
  --text-xs: 0.6400rem; /* 10.2px */
  --text-sm: 0.8000rem; /* 12.8px */
  --text-base: 1.0000rem; /* 16.0px */
  --text-md: 1.2500rem; /* 20.0px */
  --text-lg: 1.5625rem; /* 25.0px */
  --text-xl: 1.9531rem; /* 31.3px */
  --text-2xl: 2.4414rem; /* 39.1px */
  --text-3xl: 3.0518rem; /* 48.8px */
  --text-4xl: 3.8147rem; /* 61.0px */
  --text-5xl: 4.7684rem; /* 76.3px */
}

Scale table

Step	px	rem	em	Line height	Fluid clamp()
xs-3	6.55	0.4096	0.4096	1.5	clamp(0.328rem, 0.1365vw + 0.3002rem, 0.409rem)
xs-2	8.19	0.5120	0.5120	1.5	clamp(0.409rem, 0.1706vw + 0.3754rem, 0.512rem)
xs	10.24	0.6400	0.6400	1.5	clamp(0.512rem, 0.2133vw + 0.4693rem, 0.640rem)
sm	12.80	0.8000	0.8000	1.5	clamp(0.640rem, 0.2667vw + 0.5867rem, 0.800rem)
base	16.00	1.0000	1.0000	1.5	clamp(0.800rem, 0.3333vw + 0.7333rem, 1.000rem)
md	20.00	1.2500	1.2500	1.5	clamp(1.000rem, 0.4167vw + 0.9167rem, 1.250rem)
lg	25.00	1.5625	1.5625	1.3	clamp(1.250rem, 0.5208vw + 1.1458rem, 1.563rem)
xl	31.25	1.9531	1.9531	1.3	clamp(1.563rem, 0.6510vw + 1.4323rem, 1.953rem)
2xl	39.06	2.4414	2.4414	1.2	clamp(1.953rem, 0.8137vw + 1.7903rem, 2.441rem)
3xl	48.83	3.0518	3.0518	1.1	clamp(2.442rem, 1.0173vw + 2.2380rem, 3.052rem)
4xl	61.04	3.8147	3.8147	1.1	clamp(3.052rem, 1.2717vw + 2.7977rem, 3.815rem)
5xl	76.29	4.7684	4.7684	1.1	clamp(3.815rem, 1.5894vw + 3.4966rem, 4.768rem)