← Tools

CSS & Layout

Fluid Type clamp() Generator

Set a minimum and maximum size with the viewport range they span, and get a responsive clamp() value that scales smoothly in between — no media queries.

Min font size
px
Max font size
px
Min viewport
px
Max viewport
px
font-size
 
 
 
Live Preview
 Viewport 800px → 24.0px 
  
 
The quick brown fox
 
 
The size is locked at the min below the min viewport and at the max above the max viewport, scaling linearly between. Based on a 16px root for rem conversion.