Fluid Typography with clamp()
Fluid typography automatically scales font sizes between a minimum and maximum based on viewport width - no media queries needed. The clamp() function is the modern way to create type that looks perfect on every screen size.
Fluid Typography
- clamp(min, preferred, max) - Sets a value with minimum and maximum limits
- clamp(1rem, 2.5vw, 2rem) - At least 1rem, scales with viewport, never exceeds 2rem
- No media queries needed - Font size smoothly scales between min and max values
- Body text - font-size: clamp(1rem, 1.5vw, 1.125rem). Subtle scaling for readability
- Headings - font-size: clamp(1.5rem, 5vw, 3.5rem). Dramatic scaling for hero headings
- Spacing - margin: clamp(1rem, 3vw, 4rem). Responsive spacing without breakpoints
- Container width - width: clamp(300px, 90%, 1200px). Responsive container in one line
Fluid Typography Code
/* Fluid type scale */
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
p { font-size: clamp(1rem, 1.5vw, 1.125rem); }
/* Fluid spacing */
.section {
padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 3rem);
}
.card-grid {
gap: clamp(1rem, 2vw, 2rem);
}
/* Fluid container */
.container {
width: clamp(300px, 90%, 1200px);
margin: 0 auto;
}
/* Complete fluid type system */
:root {
--text-xs: clamp(0.75rem, 1vw, 0.875rem);
--text-sm: clamp(0.875rem, 1.2vw, 1rem);
--text-base: clamp(1rem, 1.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 2vw, 1.25rem);
--text-xl: clamp(1.25rem, 2.5vw, 1.5rem);
--text-2xl: clamp(1.5rem, 3vw, 2rem);
--text-3xl: clamp(2rem, 4vw, 3rem);
}Tip
Define your fluid type scale as CSS custom properties in :root using clamp(). --text-xl: clamp(1.25rem, 2.5vw, 1.5rem). Then use the variables everywhere. Your entire typography system becomes consistent, responsive, and easy to adjust in one place.
Use rem for fonts, % for widths, vw/vh for full-screen layouts
Common Mistake
Using the viewport width (vw) in clamp() without understanding its scale. 5vw on a 1920px screen = 96px - far too large for body text. A safe formula for headings is clamp(2rem, 5vw, 4rem). Test at 320px, 768px, and 1440px to verify the clamped values look good at each size.
Practice Task
Create a fluid type system using CSS variables: (1) --text-sm: clamp(0.875rem, 1.2vw, 1rem), (2) --text-base: clamp(1rem, 1.5vw, 1.125rem), (3) --text-h2: clamp(1.5rem, 3.5vw, 2.5rem), (4) --text-h1: clamp(2rem, 5vw, 4rem). Apply them to your HTML and slowly resize the viewport to see smooth scaling.
Quick Quiz
Key Takeaways
- Fluid typography automatically scales font sizes between a minimum and maximum based on viewport width - no media queries needed.
- clamp(min, preferred, max) - Sets a value with minimum and maximum limits
- clamp(1rem, 2.5vw, 2rem) - At least 1rem, scales with viewport, never exceeds 2rem
- No media queries needed - Font size smoothly scales between min and max values