Come with me down a rabbit hole of css clamp().
Buckle up because we’re about to cover 4 years worth of material in this short post.
I used the function for a project recently with a requirement for a large header font for desktop and a smaller header font for mobile devices. (Normally I’d just use media queries but I’m trying to challenge myself by incorporating new methods, functions, and concepts at every opportunity.)
I did some digging and found some great resources that go into the use cases and pitfalls of clamp(). Adrian Bece wrote up a piece about it on Smashing Magazine and Kevin Powell recorded a YouTube video on it called “The problem with viewport units”
So what is this clamp function and why should you care?
In one css declaration, you can set three parameters: minimum, preferred, and maximum values.
It clamps the current value between the min and max values. The preferred value determines how the typography scales and how fast it scales in between the min and max values. Since the preferred value depends on the size of the viewport, the vw unit is commonly used.
Ideally, you want to use rem for your min and max values. This will ensure the font size adapts according to user’s preferences. And for the preferred value, you can use vw plus an rem value (You don’t need calc(), clamp can handle this calculation). You’ll get something looking like this:
For the preferred value, there is no magic number and you can’t use the same value in all cases. It depends on your min and max values.
According to Adrian Bece’s article, you’ll need to assess when to use this function. You’re better off using this for display header text. Keep in mind this isn’t a replacement for responsive typography (where font sizes are explicitly defined based on a breakpoint). It’s more supplemental than anything else and it has its problems.
At the time of the article (about 2 years ago), fluid typography was limiting user zoom capabilities, causing accessibility concerns. Adrian Roselli (an accessibility whiz) voices the caveat to this seemingly wonderful function where text can fail the WCAG Success Criterion 1.4.4, which states that text should scale up to at least 200% when the user’s browser reaches its 500% maximum zoom level.
Maxwell Barvian wrote a follow up to Bece’s article on this topic, which came out a month ago, citing all of those who spoke up on the accessibility issues of fluid typography and using vh, including Roselli.
Barvian did the math, shared his results, and provided a guideline for devs. The TLDR is to follow this rule of thumb when using clamp():
The text will always pass WCAG Success Criterion 1.4.4 in modern browsers, if the max font size is less than or equal to 2.5 times the min font size.
So there you have it. 4 years in a nutshell.
Have you gone down any rabbit holes lately?
References:
Adrian Bece’s Smashing Magazine article: https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
MDN Clamp details: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
Adrian Bece’s fluid typography calculator https://modern-fluid-typography.vercel.app/
Maxwell Barvian’s article: https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/
Barvian’s calculator allows you to see combinations that pass WCAG SC 1.4.4: https://fluid.style/
Adrian Roselli’s accessibility concerns with fluid typography https://adrianroselli.com/2019/12/responsive-type-and-zoom.html
Leave a Reply