On CSS locks and `clamp()`
Closed this issue · 6 comments
(ideas for version 4)
Usually, developers get designs for the narrower and wider screens only. Like, from 320px to 1280px. CSS locks allow the control of the pace the values change, which can't be done using clamp(). We can be sure the greatest value of a property will be reached at the limit of the lock.
Another point to keep in mind is the direction a property can change. For example, designers often complain that a leading good for small types are too wide for the big ones. As the body size increases, the proportional leading can decrease at a completely different pace. It can go from 1.5, at the smaller font-size, to 1.25 or 1.35, at the greatest.
My plan was to throw both locks and clamp out in favor of my other project, Typetura.
A bit more about why:
To your first point, locks and clamp could both control pacing but every pacing point would increase the complexity. With Typetura you can control pacing with a CSS easing curve. There is also the issue of different default browser font sizes as they throw off the font size calculation in locks and clamp. With Typetura there is still an alignment with your breakpoints as authored.
Additionally the ease of authoring is easier with Typetura. We can simply write the desired values into CSS keyframes as opposed to calculating the viewport unit equation to target those values in the locks or clamp functions. This was a bit tedious to write and test in the current (old?) version of modular scale making it a bit buggier than I wanted it to be. Utopia has more modern CSS output but still, the technique is more fragile and bug prone than what Typetura offers, and Typetura offers better pacing control, variable font support, etc.
I gonna read about Utopia. Never heard of it. I need to compare everything.
I'm sorry if I overstep a business decision!
Oh no worries. I want the best technique and I genuinely think Typetura is it.
Starting to dig on Bézier curves.
I was wrong about the clamp() limitations!