Pick a base size and ratio. Get a complete typography scale with fluid clamp() values, line heights, and exportable code.
| Label | px | rem | line-height | ratio | clamp() |
|---|---|---|---|---|---|
| sm | 11.1 | 0.694 | 1.6 | 0.694 | clamp(0.521rem, 0.463rem + 0.29vw, 0.694rem) |
| caption | 13.3 | 0.833 | 1.6 | 0.833 | clamp(0.625rem, 0.556rem + 0.35vw, 0.833rem) |
| body(base) | 16.0 | 1.000 | 1.6 | 1.000 | clamp(0.750rem, 0.667rem + 0.42vw, 1.000rem) |
| lg | 19.2 | 1.200 | 1.5 | 1.200 | clamp(0.900rem, 0.800rem + 0.50vw, 1.200rem) |
| xl | 23.0 | 1.440 | 1.5 | 1.440 | clamp(1.080rem, 0.960rem + 0.60vw, 1.440rem) |
| 2xl | 27.6 | 1.728 | 1.3 | 1.728 | clamp(1.296rem, 1.152rem + 0.72vw, 1.728rem) |
| 3xl | 33.2 | 2.074 | 1.3 | 2.074 | clamp(1.555rem, 1.382rem + 0.86vw, 2.074rem) |
| 4xl | 39.8 | 2.488 | 1.2 | 2.488 | clamp(1.866rem, 1.659rem + 1.04vw, 2.488rem) |
Body text at your base size. This is where most reading happens. The scale should make this size comfortable, with headings above that feel proportionally heavier and captions below that recede without disappearing. Good typography is invisible — the reader notices the content, not the type.
Caption or fine print at the smallest scale step. Still legible, but clearly subordinate.
:root {
--font-sm: clamp(0.521rem, 0.463rem + 0.29vw, 0.694rem);
--font-caption: clamp(0.625rem, 0.556rem + 0.35vw, 0.833rem);
--font-body: clamp(0.750rem, 0.667rem + 0.42vw, 1.000rem);
--font-lg: clamp(0.900rem, 0.800rem + 0.50vw, 1.200rem);
--font-xl: clamp(1.080rem, 0.960rem + 0.60vw, 1.440rem);
--font-2xl: clamp(1.296rem, 1.152rem + 0.72vw, 1.728rem);
--font-3xl: clamp(1.555rem, 1.382rem + 0.86vw, 2.074rem);
--font-4xl: clamp(1.866rem, 1.659rem + 1.04vw, 2.488rem);
}
/* Line heights */
:root {
--font-sm-lh: 1.6;
--font-caption-lh: 1.6;
--font-body-lh: 1.6;
--font-lg-lh: 1.5;
--font-xl-lh: 1.5;
--font-2xl-lh: 1.3;
--font-3xl-lh: 1.3;
--font-4xl-lh: 1.2;
}