Fluid Typography

Hello. I was reading a CSS-Tricks article which has this CSS rule in the end:

Screenshot 2021-02-27 141001

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?

1 Like

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.

1 Like

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.

1 Like