Variable Font Q&A

[00:00:00]
>> Jason Pamental: Anybody have more questions about this, these few pages that we've been looking at?
>> Speaker 2: A little earlier you showed a calculation to figure out what the font width would be, and then as you were scrolling there were a whole bunch more, and I was just wondering if you could-

[00:00:20]
>> Jason Pamental: Sure.
>> Speaker 2: Maybe walk through one of those.
>> Jason Pamental: Sure, absolutely.
>> Speaker 2: As far as what's happening, and why it's happening?
>> Jason Pamental: And let's see.
>> Jason Pamental: Well, I'll do one of ones in this ff meta page, cuz I think this is probably clean but not too overwhelming. Because with install var I'll look at that one with you but that ones actually doing more stuff and so this might be a little bit easier to follow.

[00:00:57]
In looking at what we're doing with the H1, the things that we want to vary are going to be the text weight making sure that the italic is set properly, we are going to play around with line height, and then we are also, no, those are the two things we are going to calculate.

[00:01:16]
So, this is a little bit easier to kind of look at. And, the tool tips are a little bit [LAUGH] If those could go away that would be awesome, I'm sure that's a setting. So here's, similar to what we were looking at in the slides. At the low end, we start with the variable for the font size minimum.

[00:01:41]
And at the high end font size max. So that's the easy part. Start out with the low end and then whatever your largest break point is where you want it stop scaling, then that's where you set it inside a media query. Stop at that maximum value. It's the point in the middle.

[00:02:04]
As soon as we hit the first break point, where you want font size to start changing, that's where stuff starts to happen. For line height, here's what's happening. We've got, it's starting out with making that same calculation of line height. Time one m. Plus the line height max minus the minimum.

[00:02:31]
So it's only a calculation to essentially find the midpoint. That's essentially what it's doing. You got the low end value and then you're taking the high end value minus the low end value. So if it was five and ten, like we had in that other example. It's taking the low end value, which is five, and then the high end value minus the low end value, so that's also five.

[00:02:59]
And,
>> Jason Pamental: And then adding those things and multiplying by 100 viewport units, and then it get's into playing around with the break point values. I will be totally honest with you, I would have a very hard time explaining to you every piece of these formula. That's why I'm so grateful for Tim Brown for figuring it out.

[00:03:23]
But effectively what this is doing, the hundred viewport with units is like saying a 100%. And it's taking out a piece of that which is a division based on the break point values. And that amount is always going to be varying based on what does 100 viewport with units mean?

[00:03:43]
With the width of this window. So that's the piece that makes this sort of magic work is that the scalable value is 100 view port with units. Because that renders to a different number of pixels every time you move the window. So that's what, that multiplier is constantly changing.

[00:04:04]
And being added to the low end of value. So that's essentially what's happening, is it's creating a scalable amount of zero to the difference between the low and the high end value, based on a multiplier of this scaling value of Window width. I mean, that's effectively what it's doing.

[00:04:23]
So 100 view port with units translates to a pixel value. That's what the browser is doing with it, so as that pixel value keeps changing and it goes from 400 to 500 to 600 to 1200 to 1600, that number is being swapped into this formula and it's then recalculating what that font size should be.

[00:04:46]
So for your daily use of this, what you would need to know are what's the low end value you want, what's the high end value you want and where are the two break points where you want those calculations to happen. So just those four pieces of information are the only things that you need to change.

[00:05:05]
And so what I did was set up a series of variables up here or I just kinda group them all together, just so I can see them all at the same time. So, for the h1 my line height min and max values, font size min and max values, and then weight multipliers.

[00:05:29]
So the other thing that's interesting about working with a variable font this way is I actually am not setting an explicit weight value, other than on the paragraph text. Everything else is a multiplier. So it's all proportional. If I go back and I change the font weight of what my normal text is from 300 to 325, everything else is gonna recalculate from there.

[00:05:53]
So that's another sort of useful thing about having everything based on this set of variables and then multipliers. That makes it a little bit easier for me to fine-tune things by just going in and changing a base weight or changing how much I want it to vary. So in this case I have, I've defined my text weight, my initial text weight is 350.

[00:06:23]
And this is where I'm setting the variable for my paragraph weight. It is set to the text weight. These are just multipliers, so If I go back down to that heading section, which I think is somewhere down here. H1, there we go. Text weight is I've taken my paragraph weight times the multiplier.

[00:06:49]
So, if I change with that paragraph equates to then this is going to be multiplier based on that and I can change those multipliers if I want based on break points so because what I noticed is I can be more subtle, not only in text size, but also in weight differentiation.

[00:07:09]
On small screen to large. You need bold to stand out a little bit more on a big screen, little bit more than you do on a small. So, that way, you can create more of these ranges to say I want this value to shift a little bit. But only in this usage, so going back to where these were defined I've got multipliers for kinda small medium and large.

[00:07:35]
That's just sort of a semantic name for me to say in a medium break point I'm gonna shift my multiplier and so if I wanted to and see here in the h2 I'm actually changing that weight multiplier. So as the screen size changes that weight is also changing.

[00:07:55]
And so if I go back here. So this is an h2. And as this gets smaller, you'll see the weight of that is actually getting a little bit less. Not a ton, but the advantage is, at a smaller size, by having that slightly lighter weight, it keeps the shape of the characters very open and clear, but still gives me the visual emphasis that I need.

[00:08:22]
So as it get physically bigger it can support that heavier stroke weight. So you can see there I hope this got a little bit heavier. The front weight just got maybe a 100 value a little greater than it is at this smaller shift value. And so it stands out nicely at a physically bigger size.

[00:08:45]
Does that make sense?
>> Jason Pamental: We'll keep coming back to this with a few different applications and a few different usages. One thing I will say is after I wrote this the first time I've refined it a couple of times, but I've taken almost the exact same CSS and brought it in to other projects and all I've really had to do is start to change some variables.

[00:09:17]
It has so far now, granted, this is testing across eight different demos, it's not doing stuff in production. My site is gonna be the first production site that I launch using those techniques. That's my job on the plane home tomorrow. But that's so far, it has been the most reusable framework that I've created.

[00:09:43]
Because that's usually what happens with a framework is it's great for this one thing that you're doing, but then it becomes really rigid when you try and use it elsewhere. This so far to me has felt like it has the right amount of flexibility without having to touch the really crazy hard stuff.

[00:10:00]
But it is behaving nicely across the whole range of screen sizes. One second, I just want to put this up on screen so you can actually see this in action, I need to, I did not get the java script connected the right way, which I will have to update in the repository, but this was just a way for people to see things in action kinda stacking from the minimum to the maximum weight.

[00:10:27]
That used to be going in a looped animation. Loop and key frame animations in the web are still horrible memory sucks, and will kill bowsers faster than you could possibly imagine so If I left that running through two or three cycles and about half the browsers on the market, it would use 100% of your CPU cycles.

[00:10:49]
I have no idea why. It's not really doing all that much, but web animation is still a little bit weird, so that's why I set it to basically use JavaScript to, time out after 4 seconds and remove the class. So it'll animate a little bit and then it'll just go back.

[00:11:04]
But, you can take a look at the code, the key frame animation is pretty interesting. And it's just a simple JavaScript with a timer function that will remove the class. So hopefully those things will be useful.