CSS clamp() Function for Responsive Fonts
If you have spent any time developing responsive web sites, I am sure that you, too have realized that getting your font size to scale to the size of the viewport without looking too small on smaller viewports and too large on larger viewports is not always easy. I have struggled with this issue a lot in my experience as a developer, and in order to solve the issue I have found myself adding media queries with just single selectors that will adjust the font size of certain elements based on the viewport size.
As you can imagine, this approach requires extra code and time in order to achieve the results that I am going for. In recent weeks, upon researching the different functions that have been available in CSS3, I discovered the CSS clamp() function. This is a simple yet powerful function that can be applied to elements that will allow your font size to change based on the viewport but keep it from shrinking down too small or growing too large.
What is the CSS clamp() Function?
According to the MDN Docs, the CSS clamp() function is a mathematical CSS function that allows you to ‘clamp’ a value between a defined minimum and maximum range. The clamp() function takes in three parameter — the minimum, the preferred value (essentially the ‘base’ value), and a maximum value. Each value is separated by a comma. Here is an example of the syntax for the clamp() function:
.my-text-element {
font-size: clamp(1rem, 2vmin, 3rem);
}In the above example, we are setting our font-size to 2vmin, but we are also specifying a minimum and a maximum for the font-size. By using the clamp() function to define our font-size for the specified element, it allows our font-size to scale with the size of the screen at a ratio of 2vmin, but it will never allow the size of the font to go below a value of 1rem or above a value of 3rem.
This is the simplest and most effective method for creating mobile-responsive font sizes that I have come across. By using the clamp() function in my CSS, I have been able to reduce the number of lines of CSS that I have needed and I do not have to specify as many media query break points as I used to.
Perhaps the coolest thing about the clamp() function is that it is not just limited to font-sizes. According to the function’s documentation, the clamp() function can be used anywhere that you want to specify a length, frequency, angle, time, percentage, number, or integer value. This means that you can use the clamp() function to specify the width of elements based on minimum and maximum parameters.
Achieving the Perfect Width
Another cool use for the clamp() function is to set the perfect width of elements. For instance, the acceptable width of a paragraph on a single-column page is considered to be anything between 45 and 75 characters, varied by the actual size if the font being used. The clamp() function makes this type of sizing super simple, using the 0-width character advance unit (ch) with the clamp() function:
p {
width: clamp(45ch, 50%, 75ch);
}The above code will tell the browser to set the width of the paragraph to 50%, unless 50% is smaller than 45 characters or larger than 75 characters — in which case either 45ch or 75ch will be selected as the width of the paragraph, respectively.
In conclusion, the CSS math function clamp() is relatively easy to understand, and is a very powerful tool to add to your CSS toolbox. This function makes it possibly to size elements in a way that before might have seemed impossible or was extremely difficult to achieve. The clamp() feature is also widely supported in most modern browsers as of late 2019, and it could be just the tool that you need to help you build fluid, responsive user interfaces.
