With responsive design evolving and becoming increasingly nuanced, CSS itself is
constantly evolving and providing authors increased control. The
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
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
font-size: max(calc(0.5vw - 1em), 2rem)), or
font-size: max(min(0.5vw, 1em), 2rem)).
When using a calculation inside of a
function, you can nix the
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)
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
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.
Using the same concept as above, where the
min() function can set a “max”
max() sets a “min” value, you can use
max() to set a minimum
padding size. This example comes from CSS
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);
In order to enable fluid
Riethmeuller popularized a technique that
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
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);
When you use
vw units or limit how large text can get with
clamp(), there is a chance a user may be unable to scale the text to 200% of its original size. If that happens, it is WCAG failure under 1.4.4 Resize text (AA) so 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.