ZipKit
Glossary

CSS clamp()

CSS clamp() is a math function that takes a minimum, a preferred value and a maximum, and returns the preferred value limited to that range. It is defined in the W3C CSS Values and Units Module Level 4. Developers use it most for fluid typography such as clamp(16px, 2.5vw, 32px), where the text grows with the window but stops at 16px and 32px.

How it works

The spec defines clamp(MIN, VAL, MAX) as exactly the same as max(MIN, min(VAL, MAX)). The argument order is minimum, preferred, maximum. If MIN is larger than MAX, MIN wins.

  • Each argument is a calculation, so you can write 1rem + 2vw without wrapping it in calc().
  • All three must have a consistent type (number, dimension or percentage), or the function is invalid.
  • The keyword none can replace MIN or MAX in the Level 4 text, which removes that limit.
  • min() and max() are the building blocks. max() sets a floor and min() sets a ceiling, which is the opposite of what the names suggest.
#a { font-size: clamp(16px, 2.5vw, 32px); }
#b { font-size: clamp(32px, 2.5vw, 16px); }
#d { width: clamp(200px, 50%, 400px); }

Computed values in headless Chromium 141 at three viewport widths (the #d parent is 1000px wide):

320px viewport:  a=16px b=32px d=400px (2.5vw=8)
800px viewport:  a=20px b=32px d=400px (2.5vw=20)
1600px viewport: a=32px b=32px d=400px (2.5vw=40)

#a rises from 16px to 32px as 2.5vw crosses both limits. #b has MIN greater than MAX, so the minimum 32px wins at every width. #d resolves 50% of 1000px as 500px and caps it at 400px.

How do I make clamp() font sizes fluid?

Use rem for the limits and a rem plus vw sum for the middle value. In Chromium 141, clamp(1rem, 1rem + 2vw, 2rem) at 1600px computed to 32px, the same as the version with calc() inside. Adding rem to the preferred value keeps the size responsive to the user's font setting.

Common pitfalls

  • Swapping min and max: with clamp(32px, 2.5vw, 16px) the result is stuck at 32px. Keep the order small, preferred, large.
  • Using the none keyword in production: Chromium 141 did not support it. CSS.supports('font-size', 'clamp(none, 10vw, 20px)') returned false and the declaration was dropped, so the element kept the inherited 16px. Write max() or min() instead.
  • Mixing unit types: clamp(1rem, 50%, 2) has a number as MAX and a length as MIN, so it is invalid. Keep all arguments the same type.
  • Pure vw preferred values: clamp(16px, 5vw, 32px) ignores the user's text-size setting. Add a rem term to the middle value.
  • Reading min and max backwards: to cap a width use min(), to set a floor use max(). clamp() avoids that confusion.

Related terms

  • CSS calc() — the arithmetic function clamp() is built on.
  • Viewport units — the usual middle value in fluid sizes.
  • Dynamic viewport units — can serve as the preferred value for height.
  • Container queries — cqi units work as a clamp() middle value for component-based sizing.
  • Flexbox — flex items often take clamp() widths.

See also