Design tool · #08
Type scale builder
Build a modular type scale from a base size and a ratio. Preview live, export CSS custom properties in one click.
Base size
16px
1224
Ratio
Line height
1.40
Font family
Live preview
6xl
Ship it well.
119.7px
5xl
Ship it well.
89.8px
4xl
Ship it well.
67.3px
3xl
Ship it well.
50.5px
2xl
Ship it well.
37.9px
xl
Ship it well.
28.4px
lg
Ship it well.
21.3px
base
Ship it well.
16.0px
sm
Ship it well.
12.0px
xs
Ship it well.
9.0px
globals.css
/* Modular type scale · base 16px · ratio 1.333 */
:root {
--fs-xs: 0.563rem; /* 9.0px */
--fs-sm: 0.750rem; /* 12.0px */
--fs-base: 1.000rem; /* 16.0px */
--fs-lg: 1.333rem; /* 21.3px */
--fs-xl: 1.777rem; /* 28.4px */
--fs-2xl: 2.369rem; /* 37.9px */
--fs-3xl: 3.157rem; /* 50.5px */
--fs-4xl: 4.209rem; /* 67.3px */
--fs-5xl: 5.610rem; /* 89.8px */
--fs-6xl: 7.478rem; /* 119.7px */
--lh-body: 1.4;
}