Target Values

px
rem
rem

Viewport Range

px
px
px

Font Size Example

This text will scale between at and at .

Calculate the Perfect CSS clamp() Preferred Value Expression

This calculator can be used to find a clamp() preferred value expression to perfectly tween a minimum and maximum value between two viewport sizes. For example, this calculator can determine the expression that needs to be set to transition a heading from 16px font size when the viewport is 600px wide, to 24px at 1440px wide. Using this creates a much smoother result than arbitrarily guessing a set vw value.

How does the clamp() function work?

The CSS clamp() function “clamps” or constrains a value, known as the preferred value, to a minimum and maximum size. In simple terms, the function takes a minimum value, a variable value, and a maximum value. The function returns the preferred value as long as it is smaller than the maximum value and larger than the minimum. When it is above or below those thresholds, the minimum or maximum is used. The preferred value should be a variable unit and is usually set based on the view width using the vw unit.

clamp(minimum value, preferred value, maximum value)

This calculator helps determine the perfect preferred value that tweens the minimum and maximum value between two points.

Learn more about the clamp() function by reading the documentation.

How does this clamp() calculator work?

This tool calculates the math necessary to facilitate a perfect tween of two values fixed to respective viewport values. If you are interested in learning more about the math behind this calculator, I wrote a bit about it in my blog article, “What the clamp()? Mastering the CSS clamp() Function.”