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,
CSS Values And Units Level 4calc()
,min()
,max()
, andclamp()
allow mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values
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.