Type
Type scale
A ramp of sizes with its line heights, and fluid if you need it.
The scale
--text-4xlType that breathes40 px2.49 rem · 1.26--text-3xlType that breathes33 px2.07 rem · 1.29--text-2xlType that breathes28 px1.73 rem · 1.33--text-xlType that breathes23 px1.44 rem · 1.38--text-lgType that breathes19 px1.20 rem · 1.43--text-baseType that breathes16 px · base1.00 rem · 1.50--text-smType that breathes13 px0.83 rem · 1.58--text-xsType that breathes11 px0.69 rem · 1.60The CSS, ready to copy
Computed against a 16 px root, which is what every browser ships. The rem term is not decoration: a font-size made only of vw would stop responding to zoom.
:root {
--text-xs: 0.6944rem;
--text-xs-lh: 1.6;
--text-sm: 0.8333rem;
--text-sm-lh: 1.58;
--text-base: 1rem;
--text-base-lh: 1.5;
--text-lg: 1.2rem;
--text-lg-lh: 1.43;
--text-xl: 1.44rem;
--text-xl-lh: 1.38;
--text-2xl: 1.728rem;
--text-2xl-lh: 1.33;
--text-3xl: 2.0736rem;
--text-3xl-lh: 1.29;
--text-4xl: 2.4883rem;
--text-4xl-lh: 1.26;
}