Hello. I was reading a CSS-Tricks article which has this CSS rule in the end:
What’s the logic behind it? I mean, what does 100% mean? Why 1rem + 2vw
and not a bigger vw value? The 24px
is the font-size, right?
Hello. I was reading a CSS-Tricks article which has this CSS rule in the end:
What’s the logic behind it? I mean, what does 100% mean? Why 1rem + 2vw
and not a bigger vw value? The 24px
is the font-size, right?
It is the minimum, preferred, and maximum value clamp(min, perf, max)
. I would suggest you read the MDN article on clamp.
The 100%
is whatever the browser’s font-size is set to (so the user can adjust it). 1rem + 2vw
adds a “fixed” value to the otherwise viewport governed size (most likely the font size will never get as low as the default with this). And 24px
is the max allowed size. So no smaller than the default size set by the browser, preferably use 1rem + 2vw
(whatever that computes to) and at max use 24px
.
They all set the font-size which value is used depends on the clamp.
Do you recommend this technique for fluid typography?
If you mean using clamp
for font-size then yes it’s a nice way of doing fluid typography.