I've been intrigued by fluid type for ages, but I never got the whole "music scale" thing, and I didn't know CSS clamp, and I couldn't get my head around what was actually happening and so it's never gone anywhere for me… UNTIL NOW!
Implementing the thing was the easiest part: you just stuff the custom properties (or the SCSS function that generates them) into an appropriate place in the codebase and they work as expected 😮
The hard part was knowing what to expect. The penny-drop moment for me was when I was plugging values into the utopia type calculator as placeholders: I used a major third scale for min and max viewports because we didn't know if they'd be different. Similarly, it hadn't been confirmed that on large screens we'd use a base font size of 18, so I left that as 16 for both.
Now, looking at my fontsize steps, I realised they were the same for 320px screens as for 1920px screens? Huh?
And then I realised: if we have no variation in font size and no variation in scale there's nothing for a responsive font to interpolate between. What we've generated is a static scale, and the whole point of this is that the scale's values are dynamic.
So now I understood why Kyle and I were talking at cross-purposes some of the time. He was aimed towards choosing a static scale from which values would be cherry-picked for different viewport sizes; I was working towards a dynamic scale in which the values themselves would adapt responsively to the screen size.
This led me on to the other thing I was proud of achieving this week: responsive Figma components. I've wanted to crack these for a good long while.
It was felt that with fluid type we might need multiple variants of design tokens and that managing these in the design phase would add a lot of complexity. My feeling was that this is precisely the kind of thing that modern design tooling like Figma ought to handle for us.
Sure enough, with just one evening of unpaid overtime I figured out how to create Figma variables that have different modes. Creating a type component that can be switched between modes is the next piece of the puzzle, and along the way I learned how design component variants work. Finally, setting the component to automatically inherit its mode from a parent frame results in type components that scale to the correct font size when they're used in situ.
I was riding high when I nailed all of this into place. It's made me think a lot about how this new team is exactly where I need to be in my career trajectory. Front end of frontend, but maybe equally backend of design. I'll muse on that some more — there's an article in it if someone hasn't coined that exact phrase already.
END