FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Font Weight

Now that you know the difference between high-level and low-level CSS properties for variable fonts, let’s jump into working with what will be one of the four high-level properties when variable fonts hit their stride: font-weight, representing the axis wght.

Related Links

3.3 Font Weight

Hey, welcome back to Up and Running with Variable Fonts. In this lesson, we're gonna go through the first of the four high level properties you're gonna have to work with variable fonts. And that is gonna be font-weight. Unfortunately, for now font-weight is not actually ready to work with variable fonts. So, we're just gonna comment that out, for now, to remind us ehat we're actually looking at and instead we're gonna use font variation settings. As we mentioned before, if we want to use font variation settings, we need to target a four letter label that represents a particular access. We're working with weight, so that's going to be W-G-H-T, then we add a space. And this is where we're gonna be able to put the numerical value that we wanna use to represent our font weight. I'm just gonna end that line for now. Now, you're probably already used to a certain set of numbers that typically represent normal weight or bold weight or extra bold, black, etc. And before I started this lesson, I did remove the extra weight control and italics that I had on here before. So, make sure that you just have these lines and this, before you move on, because that is gonna give you the default look of the Libre Franklin font, and that's what we want. And the first thing that we're gonna do is, set this font, so that it's gonna show us the regular font weight. If we have a look at this font on Google Fonts, this is what regular should look like. And normally, if you wanted to set a font to be regular weight, you would set as font weight to 400, that's the standard size. Now, if we take a look on the Google font version again, just gonna select this font and then in the customer's tab you can see here that sure enough regular is usually represented by 400. So, let's try applying that value and see what happens. We're gonna set the weight to 400, we'll save, have it up to look. And nothing has changed, so that's very strange. All right, what happens, then, if we go with a different weight. Maybe, we'll try setting it to bold, on purpose, we'll set it to 700. Change that to 700, and, weird, still nothing's changed. All right, so now, let's try a lower number instead,let's try 100. 100 should represent super thin weight, change that to 100. Okay, well now it's thinner, but it's definitely not as thin as that, so what's going on here. This is what we have to remember, that the value ranges on the axis of variable fonts, at least for now, are completely determined by the font designer. So, if you're punching in numbers and you're wondering why you're getting no change, then what you're gonna have to do is, go to one of your variable font preview tools that we talked about earlier, like Axis-Praxis. And then, you're gonna need to look here to see what range you actually have to work with for the weight on this specific font. So, if I click to select this text, if I drag all the way to the left and you look at this little box here. It's a little small, but it says 40. So the minimum weight on this font is 40. And if I drag up, This number now says 200. So, the maximum weight you can actually have on this font is 200. So, when you start adding in values like 400 and 700, those are so far outside the range that all they do is clamp that weight down to the highest value, which is 200. And that's why when we added in 400 and 700, it still just looked fat and chunky like this text here. And it's also why when we put in 100. Our text became smaller, but not super small, like we expected it to be. And this is, again, where we come back to the named instances being useful, even though we can't directly target them with our CSS. So now, what if we choose the regular? I'll just switch this to normal Libre Franklin for now. We switch to regular. What weight do we actually need to make our font look regular? And this number in here, again, sorry it's quite small, but the number that we actually need is 84. So now, let's change our font weight to 84 and see what we get. All right, now that's looking like the regular font weight. So if we compare it to Google Fonts, there's the regular font way. And what if we want it to be bold? So, we'll go to the named instance, we'll choose bold, we'll look up this number and the value that we actually need for bold is 154. So now, let's try 154 and see what we get. There we go, that's much better. That is the correct size for bold. So now, what we could actually do when we're setting up the CSS to work with this font is, go through each of these named instances and find the number. That gives us the correct representation for the weight, if we wanna use the standard weights that the font comes with and we can add them into our code, one at a time. So, I'm just gonna copy and paste in a bunch of code. You'll get access to this file, so you'd be able to open it up and look directly at it if you don't wanna go typing all this code up yourself. But what we can actually do, just gonna comment this out, is we can create a class to represent each one of the weights that we wanna use. So, this has each one of the correct values in as pulled from the named instances and then whenever we want a font to be light we add the light class. Want it to be medium, then we add the medium class. And we've also in here, added a class named italic that if we want our text to be italicized, we can just add this class to it as well. I'm just going to add some text in here down below, so we demonstrate this. So, I've got some text for each one of the weights that we have just recreated in CSS. So, we've got thin, thin italic, extra light, extra light italic, and so on. So now, let's see how that looks. And there we go, sure enough, we now have all of the correct weights for our font. Everything that we see here has being perfectly reproduced and this is actually the code that I showed you earlier in the course to demonstrate the difference in load speed. So, we have all of these different variations but we're only using two files. And it also shows you how the weight axis works with the variable font and that is how font weight is going to work with variable fonts once we have the update to that property. Now,I will include that caveat that this is still a spec that is influx, there may be changes but this is the best information that we have to go on at the moment. But right now, we're gonna assume that if you wanted to do the same thing with a high level property, in the future you would specify a font weight, and then you would give a value of 40, and so on and so forth for all of your other weights. Now, this setup of using classes to control your font styling, that might not be the perfect way that you wanna have your styling set up. Because of the fact that you're going to need to be tying these classes into your markup, and that might not be semantic enough, however, if you're just using plain CSS that's probably gonna be the most efficient option. However, if you wanna use a preprocessor then what you would be able to do is set up mix ins that would contain the correct font variation settings that you would need to give you the recreation of a certain named instance. Then you would be able to pull those mix in's into a more semantically relevant class name to control the styling in a particular area. So that just all depends on if you're using vanilla CSS or you're working with a preprocessor and what your preferred coding conventions are. In the next lesson we're gonna look at the second of our four high level properties and that is font stretch, which represents the weak access. So, I will see you in the next lesson

Back to the top