Clamp for Font Size
I’ve been using the new CSS clamp property for sizing fonts for a little while but never managed to get exactly how I want it. A typical use is something like: font-size: clamp(15px, 1.4vw, 24px). Those are the minimum, preferred and maximum sizes. Simple enough.
The problem is that the scaling never quite fit with the range of screen widths I was thinking of. Typically the minimum and max values would kick in to early. I tried different methods including some simple math for the preferred value: font-size: clamp(15px, 0.7vw + 0.5rem, 24px). Turned out I was on the right track but it never quite worked the way I wanted: that is smooth scaling from the smallest screen size I was catering for to the largest. I knew there must be a calculation of some kind but wasn’t sure what it was.
Fortunately someone else, Design Lance had figured it out already. The bad news is that it’s quite a bit more complicated than you’d like it to be. The good news is that there is a little online calculator to make the job easy.
Simply put in the following to calculate the clamp value you want.
- Minimum viewport width in pixels
- Maximum viewport width in pixels
- Minimum font size in rems
- Maximum font size in rems
- Your 1 rem size (default is 16px for most browsers)
This seems the best way for using clamp for font-sizing.
Update
There is also uptopia.fyi which has a similar but neater way of doing the same thing as well as combining with type scale sizing too.
This outputs a bunch of CSS but if you tick the clamp checkbox you get a list of custom properties (variables) of different sizes that can be added to different elements.
The original is at: https://xgkft.csb.app/