Responsive Typography with clamp()
Lesson 20 • Advanced Track
What You'll Learn
How clamp() creates fluid typography without media queries
Understanding min(), max(), and clamp() CSS functions
Viewport units (vw, vh) for responsive sizing
Building a fluid type scale for headings and body text
Accessible minimum font sizes and line heights
rem vs em vs px — when to use each unit
💡 Think of It Like This
Think of clamp() as a thermostat. You set a minimum temperature (small screens), a preferred temperature that adjusts with the room (viewport), and a maximum so it never gets too hot (large screens). Your text size smoothly scales between the min and max.
| Function | Syntax | What It Does |
|---|---|---|
clamp() | clamp(min, preferred, max) | Picks preferred value, clamped between min and max |
min() | min(a, b) | Returns the smaller value |
max() | max(a, b) | Returns the larger value |
Fluid Typography with clamp()
Instead of writing media queries for every breakpoint, clamp() lets text scale smoothly. Resize the preview to see it in action!
clamp() Fluid Typography
Resize the preview to see text scale smoothly
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fluid Typography</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0f172a;
font-family: system-ui, sans-serif;
color: #e5e7eb;
padding: 30px;
}
/* FLUID TYPE SCALE */
h1 {
/* Min 2rem, preferred 5vw, max 4rem */
font-size: clamp(2rem, 5vw, 4rem);
co
...Units Comparison: rem vs em vs px vs vw
Choosing the right unit matters for accessibility and responsiveness.
CSS Units Comparison
See how different units behave at different sizes
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Units</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0f172a;
font-family: system-ui, sans-serif;
color: #e5e7eb;
padding: 30px;
/* Base font-size: 16px (browser default) */
}
h1 { color: #3b82f6; margin-bottom: 20px; }
.unit-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 10px;
align-items
...⚠️ Common Mistakes
- Using vw alone for font-size —
font-size: 5vwignores user zoom settings. Always wrap it inclamp()with rem-based min/max. - Font size below 16px on mobile — iOS Safari auto-zooms inputs below 16px. Keep body text at least 1rem.
- Line height in px — Use unitless line-height (e.g.,
line-height: 1.6) so it scales with font size. - Too many font sizes — Stick to a 5–7 step type scale (xs, sm, base, lg, xl, 2xl, 3xl) for consistency.
🎉 Lesson Complete
You now master responsive typography:
- ✅
clamp(min, preferred, max)for fluid sizing without media queries - ✅ Use
remfor font sizes (accessible zoom support) - ✅ Build a consistent type scale with 5–7 size steps
- ✅ Always set minimum font sizes for accessibility
Sign up for free to track which lessons you've completed and get learning reminders.