clamp

A function that takes a minimum, a preferred value, and a maximum, and keeps the value within that range. Font sizes you used to switch step by step with media queries fit on a single line.

type
Unlocked in April 2020MDN Document

Modern approach

Write the minimum, the preferred value, and the maximum on a single line. When the value grows at a constant rate from the lower to the upper limit, no media queries are needed.

h1 {
  font-size: clamp(1.25rem, 0.625rem + 2.5vw, 2.5rem);
}

Legacy approach

Media queries switched between the lower and upper limits, and calc() filled the range in between. You had to work out the breakpoints yourself so they matched the calc() formula.

h1 {
  font-size: 1.25rem;
}

@media (min-width: 400px) {
  h1 {
    font-size: calc(0.625rem + 2.5vw);
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}

Things to watch when replacing

  • For font sizes, write the minimum and maximum in rem and make the maximum at least twice the minimum. This lets text grow to 200% when the page is zoomed.
  • The middle value accepts math expressions without calc(). + and - need spaces around them; without them, the whole declaration is invalid.
  • To change the rate partway, split the range with media queries and write a clamp() for each range.
  • If the minimum is larger than the maximum, the minimum wins.
  • To limit only one side, use min() or max(), which became available at the same time. For example, width: min(100%, 960px) makes the width 100% but never more than 960px.

Browser Support

  • Chrome

    v79+
    2019-12-10

  • Edge

    v79+
    2020-01-15

  • Safari

    v13.1+
    2020-03-24

  • Safari (iOS)

    v13.4+
    2020-03-24

  • Firefox

    v75+
    2020-04-07

Search by feature name or code

e.g. aspect-ratio, :has(), padding-top

Try a different word or a property name.

Could not load search.

↑↓MoveEnterOpenEscClose