Type Scale Calculator

Build a harmonious type scale using mathematical ratios. Enter a base size and choose a scale ratio to generate a complete set of font sizes.

Base size (rem)

Scale ratio

Step	rem	px	Preview
xs	0.563	9	Ag
sm	0.75	12	Ag
base	1	16	Ag
lg	1.333	21.3	Ag
xl	1.777	28.4	Ag
2xl	2.369	37.9	Ag
3xl	3.157	50.5	Ag
4xl	4.209	67.3	Ag
5xl	5.61	89.8	Ag
6xl	7.478	119.7	Ag

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