CSS Clamp Generator
Calculate fluid typography and spacing formulas for perfect responsive design.
CSS Clamp
Calculate fluid typography and spacing.
Viewport Widths
Element Sizes
How this works
Below 320px viewport width, the size is exactly 16px (1rem).
Above 1200px viewport width, the size is exactly 48px (3rem).
In between, the size scales fluidly.
Fluid Text
font-size: clamp(1rem, 0.2727rem + 3.6364vw, 3rem);What is CSS Clamp?
The CSS clamp() function clamps a value between an upper and lower bound. It takes three parameters: a minimum value, a preferred value, and a maximum value.
Fluid Typography
Using clamp() is the modern, highly recommended approach to fluid typography (and spacing!). Instead of writing multiple media queries to change font sizes at different breakpoints, you write one line of CSS. The font size smoothly scales based on the viewport width (using vw units) between your defined minimum and maximum bounds.
The Math Behind It
The preferred value is a linear equation (y = mx + b) mapped to the viewport width. We calculate the slope (m) based on the rate of change between your max/min sizes and max/min viewport widths, and the y-intercept (b) to shift the line into the correct starting position.
Because doing this math manually is tedious, this generator does it for you instantly!
Related Guides
Deepen your understanding with our expert articles.