Greetings!
I’m trying to wrap my head around why there would be a nested calc function within clamp and why it would be the better solutions for fluidity than using a more flat measurement. Something like this:
clamp(1.56rem, calc(0.8vw + 1.4rem), 1.95rem)
I understand the minimum and maximum value but would like to understand why the preferred value is using calc.
Sometimes I’ll run across line-height values that look like this:
line-height: clamp(2.38rem, calc(2.38rem + ((1vw - 0.48rem) * 0.3386)), 2.8rem);
I would like to understand why there is a specific parenthetical calculation for the preference measurement.
Thank you.
Why would a non-static value be better for fluidity than a static one?
… I… uh… the definition of static?
1 Like
I’m guessing that the line is for font size? It’s changing the font size as the browser window is resized, and the thought is to keep a consistent ratio of font to container size as the browser changes sizes, but it does have the min and maxes to ensure the font sizes don’t get out of control.
I personally don’t like see it on line heights, but there are people who use it there as well.
Simply using the vw
unit for something like font-size
can result in quite dramatic changes in the text size on different screens. Sometimes that difference in size may be considered too much.
Combining a small vw
value with a rem
or em
value in a calc()
will reduce that difference, tempering the extremity of the change in size.
This was particularly useful in the days before we had clamp
, as it could stop really giant text on a big window, and microcopic text on a small screen. So it may be a less used method now, but could still have its uses when you don’t want extreme variation in size.
Agreed.
The general consensus has been to leave line-height
unitless, so to be relative to the font-size
.
1 Like
As an aside calc isn’t needed inside clamp() for simple additions and subtractions anymore.
e.g.
clamp(1rem, 1rem + 2vw, 3rem);
Use a generator to make life easier.
1 Like
I understand that, but why is there a calc function being used as a preference.
Ahhh…Okay. I just haven’t seen calc nested in clamp too often, which is why I asked.
Thank you, PaulOB. The books I have don’t give much detail regarding the nested calc usage; I don’t see that very often and came across it in a custom framework not too long ago.
I do use Fluid Typography Tool, which has been a GREAT timesaver.