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

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

Una Kravets

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

Browser support

min()

max()

clamp()

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 max() function does the same thing for the maximum value.

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

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.

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.

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.

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);
}

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.

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

• CSS Values and Units on MDN
• CSS Values and Units Level 4 Spec
• CSS Tricks Article on Inner-Element Width
• min(), max(), clamp() Overview by Ahmad Shadeed

Cover image from @yer_a_wizard on Unsplash.