I've been saying for a couple of years that we are on the brink of a "fluid design" revolution in front-end development, similar to what happened around the late 2000s with "responsive design". Container queries are a key part of that puzzle, and Robin's example here of using a combination of fluid type (via clamp()) and container queries is precisely the kind of pattern I've been thinking about. Plus, I love seeing a solid example for the new cqw unit. (Though a standard accessibility disclaimer around fluid type and how that interacts with page and text zoom.)
It's so cool to see these patterns slowly becoming a possibility 🙌
Example code:
p {
font-size: clamp(1rem, 2.5cqw, 2rem);
line-height: clamp(1.35rem, 3.5cqw, 1.9rem);
}
On why container sizes (and viewport sizes) can have an outsized impact on typography:
This is because in typography the font-size, the line-height, and the measure (the width of the text) are all linked together. If you change one of these variables, you likely have to change the others in response.
