Set Root Min & Max Font Size

[00:00:00]
>> Jason Pamental: As we start to think about using view port units and tying that into the way we scale things, it really starts to give me some ideas on how we might get away from defining these fixed relationships across all of these different break points. And this article from Tim Brown, it was really interesting, I really wasn't quite sure what to make of it because it's pretty complicated.

[00:00:28]
And it's pretty complicated in a way that meant you still had to rewrite things often. And so adding complexity and adding frequency didn't seem like such a great idea. But once I started figuring out how to add these things together and started looking at what Lea Verou was talking about with CSS variables, that got me thinking about how could I tie these things together with variable fonts and have all of these things flex and move and scale together.

[00:00:58]
And that's where it started to really turn into something that I thought was important and novel and a new way of thinking about typographic hierarchy in a way that's pretty sophisticated but also pretty portable. So it might be intimidating to write once, but once you have it then you can use it and modify and tweak it very easily.

[00:01:21]
So if you haven't used custom properties before in CSS, they're relatively easy to declare. You can either define this way so it will be available to anything in the document or you can scope it inside the selector. So in this case I'm saying, root, meaning I want this available throughout the entire document.

[00:01:42]
And I've set some variables equivalent to my main break points. And then I have a minimum and a maximum size. So I don't know if you recall when I first talked about view port units earlier. The problem is, in using view port units to size text, if the window gets even narrower, like maybe an Apple Watch anyone?

[00:02:03]
If you're sizing view port units there, you'd have very unpredictable results on how tiny the text actually gets to be or how big it is on a really big desktop. This locks idea that Tim Brown wrote about, is a way to set a low-end and high-end and then have everything else calculate in the middle.

[00:02:24]
So it looks really normal here where I've taken that number value. I said five and ten, I didn't give it a unit I need to not give you the unit at that point, where here the calculation is simply adding the value. That's really all this is doing. So, we've got var(--h1-font-size-min), and the calculation is multiply that time 1em, so it ends with an value, that's the only purpose to that calculation.

[00:02:53]
Now, on the high end once I've reached the pretty large desktop I'm using the font size max so 10m. So five and ten, low-end to the high-end so on a phone it's gonna be five, on a pretty large desktop, it's gonna be ten. And what we wanna do is figure out what do we do everywhere in between.

[00:03:15]
And that's where this comes in, queue headaches. So what this is doing is add a minimum width of 24.15em which is more or less making sure that as soon as you turn your phone sideways, we've tripped this breakpoint. So it's just bigger than any of the phones that I could find in terms of the reported resolution and sizing.

[00:03:38]
So that I knew that something would happen as soon as you start to rotate the phone. That's when the calculation kicks in. And what this is doing is, starting with the minimum value and then it's adding a subtraction of the minimum and max. And then it has this formula with the low and high-end break points and a hundred view port with units.

[00:04:01]
The nice thing about this is you're not really gonna have to care. Just know that it works. So the way this is set up is it's going anywhere between whichever break points I've referenced above and below. It's going to smoothly calculate from the low-end value to the high-end value.

[00:04:21]
And that's what you'll end up with is some value that is, as the screen size gets bigger that value is gonna grow from five to ten. It will never get any smaller than five, and never get any bigger than ten. So that's what's gonna be important about using this for font size, for line height.

[00:04:40]
We can use it for optical sizing. We can use it for There's a couple of other values we can use it for. There is a limitation. The problem with this calculation is it always ends up with a unit value. Because once you've introduce those units, view port, width and ems, you can't get rid of them in CSS calc.

[00:05:02]
They're working on that. There's actually active discussion in the CSS working group which I found out by going to GitHub and commenting on some of these issues so I see the updates pretty regularly. As soon as we have that we can use this kind of calculation for any variable value that we want.

[00:05:20]
So font width, as an example. If we want the characters slightly narrower on small screen and slightly wider on a big one to sort of tailor the reading experience a little bit, having that on a smooth sliding scale is pretty nice. We do have some other things that will make it a little bit easier using CSS variables, we'll come back to that in just a little bit.

[00:05:43]
So here's what it looks like in action. As this animates we've done a number of things. We've changed the optical sizing, the line height and the ascenders and descenders. And we've also, down below, changed the font size. We went from at a high end of about 18 pixel equivalent down to 16.

[00:06:05]
Or that 100% value, but we've made the characters slightly narrower so we have a few more characters per line. It makes it a little bit easier to read, and we've played around with the optical-sizing to make sure that the characters stay sturdy enough at that small size, and we've also brought the line-height a little bit closer together.

[00:06:24]
The purpose of line height is to allow you a comfortable experience reading across the line without making it too big a gap to get back to the next line easily, to let your eye travel that way. The shorter the line, the less line height you need, and that also makes for the convenient truth of having more content on the screen at any given time.

[00:06:43]
So it might not be as big an exaggeration as I'm doing here, just to kind of show you things changing, but it's certainly good to tighten it up just a little bit so that you get a little bit more content on-screen.