CSS clamp() Function

.example1 {
  font-size: clamp(1.5rem, 2.5vw, 4rem);
}

.example2 {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

Meaning

The clamp() css function clamps a value between an upper and lower bound.

The clamp() function takes three values, and order matters.

• The first is the lowest value in your range.
• The second is your ideal value.
• The third is the highest value in your range.

An area you may have already encountered the use of clamp() is for fluid typography.

The essential concept is that the font-size value can fluidly adjust based on the viewport size.

This is intended to prevent large headlines triggering overflow, or taking up too much of the viewport.

Version: CSS3

Standard Syntax

clamp(value)

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.