Fluid font sizes and spacing between two viewport widths.
Grows linearly from the minimum size at the minimum viewport to the maximum size at the maximum viewport, and stays put outside that range.
The paragraph is sized for the simulated viewport (vw units cannot follow a resized box, so the value is computed).
Fluid text scales with the viewport.
768px wide
Each step multiplies the base min and max by the ratio and gets its own clamp().
:root {
--step--2: clamp(0.64rem, calc(0.5148rem + 0.5565vw), 0.96rem);
--step--1: clamp(0.8rem, calc(0.6435rem + 0.6957vw), 1.2rem);
--step-0: clamp(1rem, calc(0.8043rem + 0.8696vw), 1.5rem);
--step-1: clamp(1.25rem, calc(1.0054rem + 1.087vw), 1.875rem);
--step-2: clamp(1.5625rem, calc(1.2568rem + 1.3587vw), 2.3438rem);
--step-3: clamp(1.9531rem, calc(1.571rem + 1.6984vw), 2.9297rem);
--step-4: clamp(2.4414rem, calc(1.9637rem + 2.123vw), 3.6621rem);
--step-5: clamp(3.0518rem, calc(2.4547rem + 2.6537vw), 4.5776rem);
}| Step | Min | Max | Sample |
|---|---|---|---|
| --step--2 | 10.24px | 15.36px | Aa |
| --step--1 | 12.8px | 19.2px | Aa |
| --step-0 | 16px | 24px | Aa |
| --step-1 | 20px | 30px | Aa |
| --step-2 | 25px | 37.5px | Aa |
| --step-3 | 31.25px | 46.875px | Aa |
| --step-4 | 39.063px | 58.594px | Aa |
| --step-5 | 48.828px | 73.242px | Aa |