With responsive design evolving and becoming increasingly nuanced, CSS itself is constantly evolving and providing authors increased control. The
clamp() functions, now supported in all modern browsers, are among the latest tools in making authoring websites and apps more dynamic and responsive.
When it comes to flexible and fluid typography, controlled element resizing, and maintaining proper spacing,
clamp() can help.
The math functions,CSS Values And Units Level 4
clamp()allow mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values
Safari was the first to ship the complete set of functions in April 2019, with Chromium following later that year in version 79. This year, with Firefox 75 shipping, we now have browser parity for
clamp() in all evergreen browsers.
You can use
clamp() on the right hand side of any CSS expression where it would make sense. For
max(), you provide an argument list of values, and the browser determines which one is either the smallest or largest, respectively. For example, in the case of:
min(1rem, 50%, 10vw), the browser calculates which of these relative units is the smallest, and uses that value as the actual value.
max() function selects the largest value from a list of comma-separated expressions.
clamp() enter three values: a minimum value, ideal value (from which to calculate), and maximum value.
Any of these functions can be used anywhere a
<integer> is allowed. You can use these on their own (i.e.
font-size: max(0.5vw, 50%, 2rem)), in conjunction with
font-size: max(calc(0.5vw - 1em), 2rem)), or composed (i.e.
font-size: max(min(0.5vw, 1em), 2rem)).
When using a calculation inside of a
clamp() function, you can remove the call to
calc(). For example, writing
font-size: max(calc(0.5vw - 1em), 2rem) would be the same as
font-size: max(0.5vw - 1em, 2rem).
min(<value-list>): selects the smallest (most negative) value from a list of comma-separated expressions
max(<value-list>): selects the largest (most positive) value from a list of comma-separated expressions
clamp(<min>, <ideal>, <max>): clamps a value between an upper and lower bound, based on a set ideal value
Let's take a look at some examples.
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 are not narrower than 45 characters or wider than 75 characters, use
clamp() and the
ch (0-width character advance) unit:
width: clamp(45ch, 50%, 75ch);
This allows for the browser to determine the width of the paragraph. It will set the width to 50%, unless 50% is smaller than
45ch, at which point
45ch will be selected, and visa versa for if 50% is wider than
75ch. In this demo, the card itself is getting clamped:
You could break this up with just the
max() function. If you want the element to always be at
50% width, and not exceed
75ch in width (i.e. on larger screens), write:
width: min(75ch, 50%);. This essentially sets a "max" size by using the
By the same token, you can ensure a minimum size for legible text using the
max() function. This would look like:
width: max(45ch, 50%);. Here, the browser selects whichever is larger,
50%, meaning the element must be at least
45ch or larger.
Padding management #
Using the same concept as above, where the
min() function can set a "max" value and
max() sets a "min" value, you can use
max() to set a minimum padding size. This example comes from CSS Tricks, where reader Caluã de Lacerda Pataca shared this idea: The idea is to enable an element to have additional padding at larger screen sizes, but maintain a minimum padding at smaller screen sizes, particularly on the inline padding. To achieve this, use
calc() and subtract the minimum padding from either side:
calc((100vw - var(--contentWidth)) / 2), or use max:
max(2rem, 50vw - var(--contentWidth) / 2). All together it looks like:
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
Fluid typography #
In order to enable fluid typography, Mike Riethmeuller popularized a technique that uses the
calc() function to set a minimum font size, maximum font size, and allow for scaling from the min to the max.
clamp(), you can write this more clearly. Rather than requiring a complex string, the browser can do the work for you. Set the minimum acceptable font size (for example,
1.5rem for a title, maximum size (i.e.
3rem) and ideal size of
Now, we get typography that scales with the viewport width of the page until it reaches the limiting minimum and maximum values, in a much more succinct line of code:
font-size: clamp(1.5rem, 5vw, 3rem);
Warning: Limiting how large text can get with
clamp() can cause a WCAG failure under 1.4.4 Resize text (AA) , because a user may be unable to scale the text to 200% of its original size. Be certain to test the results with zoom.
The CSS math functions,
clamp() are very powerful, well supported, and could be just what you're looking for to help you build responsive UIs. For more resources, check out:
- CSS Values and Units on MDN
- CSS Values and Units Level 4 Spec
- CSS Tricks on Article on Inner-Element Width
- min(), max(), clamp() Overview by Ahmad Shadeed
Cover image from @yer_a_wizard on Unsplash.