Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you use negative values in the CSS clamp() function?

Tags:

css

clamp

I would love to implement fluid letter-spacing using the clamp function in CSS. But as i like my letter spacing tight, i would need to have three negative values in the formula and tried now for hours to figure this one out. Do I have to switch the min and max values, as they are negative?

letter-spacing: clamp(-1px, -1vw, -3px);

I need to have more space, the smaller the font gets, not in a linear way. Any idea on how this could be achieved would be most appreciated.

like image 549
Patrick Roppel Avatar asked Nov 01 '25 23:11

Patrick Roppel


2 Answers

You could use probably:

letter-spacing: calc(clamp(-1px, -1vw, -3px)  * -1);
like image 129
Sebastian Tobias Avatar answered Nov 03 '25 12:11

Sebastian Tobias


You gotta turn around those values. As the first one is the minimum value and the last one the maximum. -3px is smaller than -1px. I made the spacing larger so you can see it. But this works totally fine for me.

p {
  letter-spacing: clamp(-30px, -10vw, -10px);
}
<p>
  Hello
</p>
like image 37
Quentin Albert Avatar answered Nov 03 '25 12:11

Quentin Albert