4

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Patrick Roppel
  • 41
  • 3

3 Answers3

2

You could use probably:

letter-spacing: calc(clamp(-1px, -1vw, -3px)  * -1);
lifetimeLearner007
  • 643
  • 6
  • 17
Sebastian Tobias
  • 41
  • 1
  • 5
1

Yes you can use negative values in clamp.

Do I have to switch the min and max values, as they are negative?

clamp is defined as clamp(MIN, VAL, MAX) which is equal max(MIN, min(VAL, MAX)). So MIN has to be smaller than MAX.

So clamp(-1px, -1vw, -3px) is wrong because -1px is larger than -3px.

TylerH
  • 20,799
  • 66
  • 75
  • 101
t.niese
  • 39,256
  • 9
  • 74
  • 101
0

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>
Quentin Albert
  • 560
  • 3
  • 10
  • hi quentin. thanks for your answer and sorry for the late reply. i have tried your solution but it has the opposite effect of what i am looking for. the clamp works, but the bigger the type gets, the more space it gets. the function seems reversed, as soon as you use negative values... – Patrick Roppel Dec 29 '21 at 15:25