clamp()

can we use font-size: clamp(0.9rem, 1rem, 2.2rem);? but the syntax says font-size: clamp(0.9rem, 1vw, 2.2rem);

8 Replies

the second value is the prefered value. if that is a static value (1rem), it will allways be that value. The purpose of clamping is that the font-size wont go below or a bove the defined 1st and 3rd value. The font will scale between those thanks to the variable size (vw)

Jochem•6mo ago

and you should always include a component using rem in the middle argument, so something like clamp(0.9rem, 0.8rem + 1vw, 2.2rem). Otherwise, the font won't scale with the user's font-size preference, which isn't good for accessibility

VandanaOP•6mo ago

So for which screen size it will scale the 1st value and which screen size it will scale to the third value and the prefered value??

Jochem•6mo ago

that depends on the middle value in your secont example with 1vw as the middle, the font will be 1vw until 1vw becomes equal to or smaller than 0.9rem, when it will stick to 0.9rem. Alternatively, when it gets bigger than 2.2rem, it will stick to 2.2rem that's why the middle needs to have a variable unit component, or it won't change size basically, if this were in javascript (this is hypothetical, just to demonstrate the logic), it would work like this:

let fontsize = 1vw;
if (fontsize < 0.9rem) {
  fontsize = 0.9rem;
}
if (fontsize > 2.2rem) {
  fontsize = 2.2rem;
}

let fontsize = 1vw;
if (fontsize < 0.9rem) {
  fontsize = 0.9rem;
}
if (fontsize > 2.2rem) {
  fontsize = 2.2rem;
}

there's also the mdn article that can be really useful to read

VandanaOP•6mo ago

yeah went through it and then posted this question wasnt able to understand so the preferable value can be % as well? well explainatory!!

Jochem•6mo ago

anything variable, yes. As long as you also include a component in rems in the middle

VandanaOP•6mo ago

Ok got it thanks

althepal78•6mo ago

Thanks y'all I need to get to reading that article because clamp be getting me frustrated as hell

Gaming

Programming

clamp()