Responsive Typography
Fluid Type Scale
/* clamp(min, preferred, max) */
--font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--font-size-h3: clamp(1.25rem, 1rem + 1vw, 1.5rem);
--font-size-h2: clamp(1.5rem, 1rem + 2vw, 2.25rem);
--font-size-h1: clamp(2rem, 1rem + 3vw, 3.5rem);
--font-size-display: clamp(2.5rem, 1rem + 5vw, 5rem);
Line Length by Viewport
- Mobile (320-480px): 35-50 characters
- Tablet (768-1024px): 50-65 characters
- Desktop (1280+): 55-75 characters
- Set
max-width on text containers, not viewport percentage
Responsive Adjustments
| Property |
Mobile |
Desktop |
| Body size |
16px |
18-20px |
| H1 size |
28-32px |
48-64px |
| Line height (body) |
1.5 |
1.6 |
| Line height (headings) |
1.1 |
1.15 |
| Letter-spacing (headings) |
-0.01em |
-0.02em |
