Fluid Font Sizes with clamp()

In this lesson you'll learn how to specify a fluid font size using the clamp() function, so you can achieve responsive text size without writing a media query over and over. This is for people searching "CSS clamp usage."

Using clamp(minimum, preferred, maximum) lets you specify, in a single line, a font size that automatically grows and shrinks with the screen width, while never getting too small or too large. It's a convenient function that saves you from writing several media queries.

The sample code achieves a heading size that stays within a minimum of 1.2rem and a maximum of 3rem, based on 5% of the screen width (5vw), with the specification font-size: clamp(1.2rem, 5vw, 3rem);. Try changing the preview's width and watch the text size change continuously.

A common beginner stumbling block is the meaning of the vw unit. 1vw is a unit representing "1% of the screen width," and its value changes in step with the screen width. The key point is that using this fluid unit inside clamp() is what achieves the smooth scaling.

There are a lot of situations where you want text small on a phone, large on a computer, but never at either extreme — and this single function achieves flexible typography all on its own. It's a technique valued highly in recent responsive design.