clamp() in Action
The heading and text below use clamp() for fluid font sizing. Drag the bottom-right corner of the
box to resize it and watch the text scale smoothly:
Drag the handle to resize →
Harbor Study No. 3
This series explores the tension between natural forms and digital artifacts. Each piece began as a plein air sketch before being reinterpreted over several weeks.
The font size smoothly interpolates between the minimum (1.25rem) and maximum (3rem) as the container changes width. No breakpoints, no jumps.
This demo uses cqw (container query width) units so the text responds to the
resizable box. In real projects, you'll choose between vw (viewport-relative) and cqw
(container-relative) depending on whether the text should scale with the browser window or its parent component.