Calc Nested in Clamp and Other

HTML & CSS
1

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.

2

Why would a non-static value be better for fluidity than a static one?
… I… uh… the definition of static?

1 Like
3

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.

4

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.

5

Agreed.
The general consensus has been to leave line-height unitless, so to be relative to the font-size.

1 Like
6

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
7

I understand that, but why is there a calc function being used as a preference.

8

Ahhh…Okay. I just haven’t seen calc nested in clamp too often, which is why I asked.

9

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.