Part 5: Dynamic Typography Redux: clamp() on it
This week has a big update to the typographic scaling that features some very new CSS about which I’m pretty excited. It’s featuring a new way of defining low, scaling, and high values for things like font-size that removes a bunch of complexity from how I was handling this before. What I appreciate is that we can keep the different sizes we have defined so far for small, mid, and larger size screens — and just layer in the new scaling technique where it’s supported (which is pretty much every shipping browser these days). We’ll right away have font-size and line-height that scales nicely across the whole range fo screen sizes without needing a single media query. Let’s dig into a new approach to making our typography dynamic.
Clamp()-ing on to a new approach
Over the past couple of years I’ve focused on scaling typography based on a technique called CSS Locks, which I wrote about a while back in the newsletter. Conceptually it focused on starting on smallest screens with the smallest size you wanted a piece of text to appear, and scaled that text up along with the screen size until it reached a maximum size specified. But this depended upon breakpoints and a lot of pretty complex math. Recently however support for a new technique has become supported in all the shipping browsers that provides a much simpler approach.
