The three arguments of clamp
The clamp function takes a minimum, a preferred value, and a maximum. The browser picks the preferred value but never lets it fall below the minimum or rise above the maximum. This gives you a value that flexes within bounds.
- The minimum is the floor the value never drops under.
- The preferred value usually mixes a viewport unit with a fixed part.
- The maximum is the ceiling the value never exceeds.
Building fluid type
For fluid typography the preferred value combines a viewport width unit with a constant so the size grows with the screen. The minimum keeps small phones readable and the maximum stops headings from getting huge on wide monitors.
- Use a viewport unit so the size tracks screen width.
- Add a fixed part so very narrow screens stay legible.
- Pick a min and max that bracket comfortable reading sizes.
A pure viewport unit alone scales without limits and can become unreadable, which is exactly the problem clamp solves by capping both ends.
Key idea
Clamp returns a preferred value bounded by a minimum and maximum, which makes font sizes scale fluidly with the viewport while staying readable at both extremes.