Loading…
Loading…
Generate a modular type scale — fixed or fluid with clamp() — from a base size and ratio, as CSS custom properties ready to paste.
Also covers: Typography scale generator · Font-size calculator · Fluid type scale
Each step is the base × ratio^step. Fluid sizes grow smoothly between the two screen widths using rem + vw, so browser zoom and the reader's font-size setting still work.
Preview (large-screen size)
:root { --step-5: clamp(2.4883rem, 2.0439rem + 1.975vw, 3.624rem); /* 39.81px → 57.98px */ --step-4: clamp(2.0736rem, 1.7506rem + 1.4358vw, 2.8992rem); /* 33.18px → 46.39px */ --step-3: clamp(1.728rem, 1.4966rem + 1.0284vw, 2.3193rem); /* 27.65px → 37.11px */ --step-2: clamp(1.44rem, 1.2774rem + 0.7226vw, 1.8555rem); /* 23.04px → 29.69px */ --step-1: clamp(1.2rem, 1.0887rem + 0.4946vw, 1.4844rem); /* 19.2px → 23.75px */ --step-0: clamp(1rem, 0.9266rem + 0.3261vw, 1.1875rem); /* 16px → 19px */ --step-n1: clamp(0.8333rem, 0.7877rem + 0.2029vw, 0.95rem); /* 13.33px → 15.2px */ --step-n2: clamp(0.6944rem, 0.6688rem + 0.114vw, 0.76rem); /* 11.11px → 12.16px */} body { font-size: var(--step-0); line-height: 1.5; }h1 { font-size: var(--step-5); line-height: 1.1; }h2 { font-size: var(--step-4); line-height: 1.1; }h3 { font-size: var(--step-3); line-height: 1.2; }h4 { font-size: var(--step-2); line-height: 1.2; }h5 { font-size: var(--step-1); line-height: 1.2; }small { font-size: var(--step-n1); }Sizes
| Step | Use | Small screen | Large screen |
|---|---|---|---|
| 5 | h1 | 39.81px · 2.4883rem | 57.98px · 3.624rem |
| 4 | h2 | 33.18px · 2.0736rem | 46.39px · 2.8992rem |
| 3 | h3 | 27.65px · 1.728rem | 37.11px · 2.3193rem |
| 2 | h4 | 23.04px · 1.44rem | 29.69px · 1.8555rem |
| 1 | h5 | 19.2px · 1.2rem | 23.75px · 1.4844rem |
| 0 | body / h6 | 16px · 1rem | 19px · 1.1875rem |
| -1 | small | 13.33px · 0.8333rem | 15.2px · 0.95rem |
| -2 | caption | 11.11px · 0.6944rem | 12.16px · 0.76rem |
For fluid type, set small- and large-screen values.
From captions to display headings.
Custom properties with rem or clamp() values, and heading rules.
Each size is the previous one multiplied by a fixed ratio (e.g. 1.25), so sizes relate harmoniously. Ratios are named after musical intervals.
Sizes grow smoothly between two screen widths using clamp(), instead of jumping at breakpoints.
Yes when it includes rem, as here: text still responds to browser zoom and the reader's font-size setting.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.