Choose a base size and modular scale ratio to generate a full type scale in px and rem, with copyable CSS variables and fluid clamp values.
Loading tool…
Set the base font size and scale ratio
Review the generated px and rem sizes
Copy the CSS variables or fluid clamp values
We build calculators, estimators, and AI-powered tools that convert visitors into leads.
| Label | Pixels | REM |
|---|---|---|
| xs | 8px | 0.5rem |
| sm | 10px | 0.625rem |
| base | 13px | 0.813rem |
| lg | 16px | 1rem |
| xl | 20px | 1.25rem |
| 2xl | 25px | 1.563rem |
| 3xl | 31px | 1.938rem |
CSS Variables
--text-xs: 0.5rem; --text-sm: 0.625rem; --text-base: 0.813rem; --text-lg: 1rem; --text-xl: 1.25rem; --text-2xl: 1.563rem; --text-3xl: 1.938rem;
Fluid Typography (clamp)
--text-xs: clamp(0.400rem, 2.5vw, 0.600rem); --text-sm: clamp(0.500rem, 3.1vw, 0.750rem); --text-base: clamp(0.650rem, 4.1vw, 0.975rem); --text-lg: clamp(0.800rem, 5.0vw, 1.200rem); --text-xl: clamp(1.000rem, 6.3vw, 1.500rem); --text-2xl: clamp(1.250rem, 7.8vw, 1.875rem); --text-3xl: clamp(1.550rem, 9.7vw, 2.325rem);