CSSAwwwards
+ Submit tool
typography

CSS Fluid Typography with clamp()

Font sizes that scale fluidly between viewport breakpoints using the CSS clamp() function.

Fluid typography eliminates the need for multiple media-query font-size overrides. The clamp(min, preferred, max) function calculates a preferred value using viewport width (vw) and automatically clamps it between a minimum and maximum. The formula uses a linear interpolation between two breakpoints.

Live CSS Editor
CSS
Preview
Edit CSS → see live previewTab = 2 spaces

Usage Note

The clamp() function takes three arguments: minimum value, preferred value (using vw), and maximum value. Use rem units for accessibility — the preferred value can mix rem and vw using calc().

Tags
#fluid-typography#clamp#responsive#font-size#viewport
Share on XLinkedIn