Responsive Letter Spacing – Cloud Four
Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.
Okay, combining flex-basis and clamp() is pretty cool!
Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.
I don’t normally link to articles on Medium—I respect you too much—and I do wish this were written on Mike Hall’s own site, but this is just too good not to share.
And don’t dismiss this as a nostalgiac case study from the past:
At no point did the constraints make the product feel compromised. Users on modern devices got a smooth experience and instant feedback, while those on older devices got fast, reliable functionality. Users on feature phones got the same core experience without the bells and whistles.
The constraints forced us to solve problems in ways we wouldn’t have considered otherwise. Without those constraints, we could have just thrown bytes at the problem, but with them every feature had to justify itself. Core functionality had to work everywhere, and without JavaScript crutches proper markup became essential.
This experience changed how I approach design problems. Constraints aren’t a straitjacket, keeping us from doing our best work; they are the foundation that makes innovation possible. When you have to work within severe limitations, you find elegant solutions that scale beyond those limitations.
A great talk by Matthias on what you can do with web standards today!
A workshop on resilient CSS layouts
Oh, hell yes!
Do not hesitate—sign yourself up to this series of three online workshops by Miriam. This is the quickest to level up your working knowledge of the most powerful parts of CSS.
By the end of this you’re going to feel like Neo in that bit of The Matrix when he says “I know kung-fu!” …except kung-fu isn’t very useful for building resilient and maintainable websites, whereas modern CSS absolutely is.
Safari 18 supports `content-visibility: auto` …but there’s a very niche little bug in the implementation.
Improving performance with containment.
Defining the inputs instead of trying to control the outputs.
CSS logical properties here, they just aren’t evenly distributed yet.
Worst buddy movie ever.