CSS min(), max(), and clamp()

Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.

As responsive design becomes more nuanced, CSS is constantly evolving to give authors increased control. The min(), max(), and clamp() functions, now supported in all modern browsers, are among the latest tools in making authoring websites and apps more dynamic and responsive. You can use these functions to control element sizing and resizing, maintain spacing between elements, and create flexible and fluid typography.

The math functions, calc(), min(), max(), and clamp() allow mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values

CSS Values And Units Level 4

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

Usage

You can use min(), max(), and clamp() on the right side of any CSS expression where it would make sense. For min() and max(), you provide an argument list of values, and the browser determines which one is the smallest or largest. For example, in the case of width: min(1rem, 50%, 10vw), the browser calculates which of these relative units is the smallest and uses that value for the element's width.

The min() function selects the minimum value from a list of options in this Codepen demo.

The max() function does the same thing for the maximum value.

The max() function selects a value from a list of options in this Codepen demo.

To use clamp(), enter three values: a minimum value, an ideal value to calculate from, and a maximum value.

The clamp() function keeps its value between the specified minimum and maximum in this Codepen demo.

You can use these functions anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. You can use them on their own (as in font-size: max(0.5vw, 50%, 2rem)), with calc() (as in font-size: max(calc(0.5vw - 1em), 2rem)), or composed (as in font-size: max(min(0.5vw, 1em), 2rem)).

The following are some examples of how to use these functions.

The perfect width

According to The Elements of Typographic Style by Robert Bringhurst, "anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size."

To ensure that your text blocks stay between 45 and 75 characters wide, use clamp() and the ch (0-width character advance) unit:

p {
  width: clamp(45ch, 50%, 75ch);
}

This lets the browser determine the width of the paragraph. It sets the width to 50% by default. If 50% is smaller than 45ch, it uses 45ch as the width instead, and if 50% is wider than 75ch, it uses 75ch.

Use the clamp() function to set a minimum and maximum width. See Demo on Codepen.

You can also break this up using just min() or max(). If you want the element to always be at 50% width, and not exceed 75ch in width on larger screens, use width: min(75ch, 50%); to set the maximum size.

Use the min() function to set a maximum width.

In the same way, you can set a minimum size for legible text using the max() function, as in width: max(45ch, 50%);. Here, the browser selects whichever value is larger, meaning the element must be 45ch or wider.

Use the max() function to set a minimum width.

Manage padding

You can also use max() to set a minimum padding size. This example comes from CSS Tricks, where reader CaluĆ£ de Lacerda Pataca shared this idea: Let an element have additional padding at larger screen sizes, but keep a minimum padding at smaller screen sizes. To do this, use calc() or max() and subtract the minimum padding from both sides of the element: calc((100vw - var(--contentWidth)) / 2), or max(2rem, 50vw - var(--contentWidth) / 2). In your style sheet, it should look like this:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Set a minimum padding for a component using the max() function. See Demo on Codepen.

Fluid typography

To enable fluid typography, Mike Riethmeuller popularized a technique that uses the clamp() function to set a minimum font size, maximum font size, and allow scaling between those sizes.

Use clamp() to create fluid typography. See Demo on Codepen.

Before clamp(), designing font scaling required complex style strings. Now, you can let the browser do the work for you. Set the minimum acceptable font size (for example, 1.5rem for a title), maximum size (such as 3rem) and ideal size (such as 5vw). Now you have typography that scales with the page's viewport width until it reaches the limiting minimum and maximum values, using very little code:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

More resources

Cover image from @yer_a_wizard on Unsplash.