The first sprint of the new design team is concerned with the font scale. It's kind of amazing to me that we are where we are with the design system and not only is this not nailed down, it's not even vaguely defined. Feels like when your teenage band designs record sleeves and plans shows before they've written their first song.
So the confusion and discomfort we felt is probably natural and good, and I did my best to spin discussions in that direction, saying this, THIS is the moment! THIS is when we start making things real!
My task is to look at Utopia fluid typescale and see how that can fit our needs. I started out thinking it might be something for further down the line, but now I'm excited by how much it could simplify things.
Focusing on headings because they represent the font scale best, my top insights so far are:
- We need to decouple heading sizes from typescale sizes. We already kinda knew this, but it's now clear that even the naming should be separate.
- Sequential steps in our system don't need to be sequential steps on the generated scale. This was a penny-drop, though in retrospect it shouldn't have been. H1 can be
--step-4and H2 can be--step-2on an minor third scale … there's still a consonant relationship. - Just beacause our base size = 1rem = 16px doesn't mean our body copy has to be 16px. Again, choosing the scale is different than assigning values from that scale.
In my own time I've been messing around with my blog site a lot. I've got some random emojis appearing in the background to make it look less blank. I've tightened up the grid adherence and put scroll on some overflowing containers, and added a page-description <details> element in the sidebar. I'm slightly obsessed with the <details> element.
I've also had a play around with the new view transitions API, which is going to be great when it ships and has cross-browser support. Just by including a single CSS directive I get smooth snapshot transitions across pages in Chrome. Unfortunately it clashes with the darkmode JS I added last week, so results are unpredictable at best. My current plan is to suppress darkmode on Chrome-based browesers for the timebeing. Thinking about how and why these features interfere with each other, I started to wonder if I should bother with darkmode at all. There are browser extensions for that if someone really wants it; I'm not sure everyone rolling their own is a good thing 🤔.
END