Rubber Design Without Magic

Previously, to change font size we wrote 5 media queries. Now one line is enough.

clamp() Function

It keeps value within given boundaries: clamp(Minimum, Preference, Maximum).

h1 {
  /* From 24px to 48px, smoothly grows as 5% of screen width */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Note

5vw is the " preferred " size. When browser window changes, font smoothly scales. But as soon as it hits 1.5rem or 3rem boundary — growth stops.

Tip

Use online calculators (e.g., Clamp Calculator) to pick ideal values for your project.