Everything I Learned About min(), max(), clamp() in CSS

Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples.

Regarding the clamping of the font-size of a page, you don’t really need clamp():

Above that clamp() in Safari 13.1 doesn’t seem to like font-size, so it wouldn’t work there anyway.

Everything I Learned About min(), max(), clamp() in CSS →

💁‍♂️ You might also like this post by Dannie Vinther which covers the same subject: Flexible layouts without media queries

💡 Want to know more about CSS Functions? You can read The Complete Guide to CSS Functions on CSS-Tricks.

UPDATE 2020.05.07: An interesting discussion sparked on Twitter regarding the clamping of the font-size.

As Šime Vidas noted, using font-size: clamp(16px, 5vw, 50px); has an accessibility issue as it breaks page zoom.

The problem isn’t the clamping itself, but using a “pure vw” font size.

To fix page-zoom, add a unit that does respond to page zoom in the mix.

.title {
    font-size: clamp(16px, 5vw + 16px, 50px);

This way it will respond to both viewport width change and page zoom.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.