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 max, 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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Yes you can use negative values in clamp.

do i have to switch the min max, 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.