test out using a multiplier in the fluid sizes

[argyleink]

some of the fluid sizes do most their scaling in the lower widths, while others in the larger widths. using a multiplier in the equation could enable controlling these flow points better, for hopefully a more linear experience between lower and upper bounds.

--font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);

/* becomes */
--fluidity: 2vw;
@media (min-width: 1024px) { --fluidity: 4vw }

--font-size-fluid-1: clamp(1rem, var(--fluidity), 1.5rem);

too much? the fluid props are really fun to use, but i feel it needs a tiny bit more variety and a bit more consistency.

[airen]

Wouldn't it be better to apply props to the clamp() calculation function?

font-size: clamp([min]rem, [v]vw + [r]rem, [max]rem);

• x — current viewport width value (px).
• y — resulting fluid font size for a current viewport width value x (px).
• v — viewport width value that affects fluid value change rate (vw).
• r — relative size equal to browser font size. Default value is 16px.

The above description is from Adrian Bece 's tutorial （https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/）

[argyleink]

great post! love the reverse liquid ones, might make cool props!

--fluid-reverse-3: clamp(3rem, -4vw + 6rem, 4.5rem);

i dig the tool too, i should map out all the fluid props into that graph, i mostly figured it out with manual testing 🤷🏻 i bet there's room for improvement tho if OP's were mapped

[kevin-powell]

If you want to map things out a bit more in line with typographic scales, the Utopia type calculator is fantastic (clamp() is not used by default, but they have a checkbox to turn it on). What's fun with this is you can set different scales for the low and high ends, and it figures it all out, which is really nice.

What's interesting is, if you don't use clamp() version, it uses custom props for --fluid-min-width and --fluid-max-width, so if you wanted to take this type of approach, it could open the door to people being able to modify those without really worrying about the underlying functionality. This does lead to the question of how much customization you'd like to bother with. I think for most people, the nice thing here is having some easy-to-use and sane styles, out of the box. If someone is after a more complex type scale, they can always roll their own 🤷‍♂️

Utopia has a fluid space calculator as well, which is pretty similar to the type scale without clamp() in how it works, so if you do think it's worth exploring that route, the fluid spacing would follow the same min and max size custom props.

(there is a small issue with the upper limit though, as it's also defined within a media query. custom media queries would solve this, but until they're supported it could lead to issues if someone tries to update that value if they aren't using PostCSS, so maybe it's not worth the trouble).

Vertical spacing

As I mentioned on the Discord, it might be worth having fluid sizes based on vh. Having fluid sizes on margin-block and padding-block can be convenient.

For something like this something like --size-fluid-vh-x would work, but that would imply that the current fluid sizes should probably be updated to --size-fluid-vw-x.

I think having them as the same scale as the vw would work, if implemented. If anything, it's probably best to keep them the same so people know what they're getting, whether they pick -vh-3 or -vw-3. It would be annoying if those were different, I think.