FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 High-Level and Low-Level CSS Properties

When CSS Fonts Module Level 4 rolls out, there will be two ways you can control variable fonts through CSS. These methods have been dubbed “high-level” and “low-level” by W3C.

At the moment, we’re still waiting for “high-level” properties to get browser support. Regardless, now is the time to get ahead of the curve, learn about the axis they control, and see how we can implement that understanding through “low-level” properties in the interim.

Related Links

3.2 High-Level and Low-Level CSS Properties

Hi, welcome back to Up and Running with Variable Fonts. We've got our font loaded into our site and now we need to look at how we can actually control its variations and decide how it's gonna look. The first thing you will need to look at in order to understand that are the two types of CSS that we are being given to control variable fonts. These two types are being described as high level, and low level. There are going to be four high-level CSS properties for working with variable fonts. That may expand further, but for now, it's just four. And we're gonna have one low-level CSS property. Now the tricky thing is right now the high level properties aren't supported in browsers. So we're gonna have to wait a little while before we can actually use them. However it's still important to understand how they are gonna work now because W3C are asking us to use a high level properties wherever we can as preference and only use the low level property when we absolutely need to. There's a few different reasons for this. I'll give you a link in the next post video to explain why. Just suffice to say, it's gonna be important to know about this high level properties. So even though we can't use them directly yet, we're going to dig into how they work. And we can actually look pretty closely at that because we can already recreate the effects that you're gonna get using high level properties by using a low level property. If that all just sounds like it doesn't make a lot of sense yet, then just hold tight for a minute, because we're gonna go through this and it will make sense by the end. All right, so we're gonna have these four high level properties. They're gonna be font weight, font-stretch, font-style, and font-optical-sizing. These first three you're already familiar with from just working with regular CSS. But they don't yet interact with variable fonts in the way that they're going to in the future. And this fourth property is, as far as I'm aware, specific to variable fonts. So it won't do anything at all right now. Then in the low level category, we're gonna have just one property. That property's gonna be font-variation-settings. This one is already fully operational in the browser. So that's the one that you have to use to interact with variable fonts for now until we have all of these four working in the way that they're going to in the future. All right, now in the context of working with variable fonts, each one of these high level properties is going to interact with a specific access. And it's gonna interact with that axis through a four letter string, a four letter label that each axis has. Font weight is going to interact with the weight axis as you would probably expect. And the four letter label for the weight axis is wght. And the reason we wanna know what the four letterlabel for the axis is, is because we'll need this label in order to interact with the axis through font variation settings. So if we wanna simulate the effect of using font weight with a variable font, then we're gonna take this string and use it with this property. You'll see how that works in just a second. The font-stretch property is going to work with the width axis, and the width axis is represented by wdth. The font-style property is actually going to be able to interact with two axes. It's gonna be able to interact with the italic axis, which will be represented by ital. And also the slant axis which will be represented by slnt. And we're gonna talk a little bit more about the differences between these two, and why you can have two axes to work with one property in a dedicated lesson a little bit later. And then finally the font optical sizing property will interact with the optical size axis and it will be represented by OPS Zed or Z depending on where you come from. Now, let's look at the way this property is gonna work so we can see what the relevance of all this information up here is. So after you've added a font-variation-settings property to a style, you'll of course add a colon. And then, what you'll need to do is add some quotation marks and then specify the four letter label for the axis that you want to modify. So if you want to modify the weight axis, then you would specify wght. You remember from up here? That's the axis that represents font weight and we might say we want the font weight to be 300, but you might also modify the width at the same time so that would be this up here. In this case you would add a comma so that you can add another value, another pair of single quote marks. And then specify wdth make a space and then add whatever value you need to add for your font. And then you would close it off with a semi colon. Let me just comment all of this out so we can have some proper formatting showing up here. All right, so this is how you would modify the weight and the width of a variable font using a lower level property. But when our high level properties are working as well, an equivalent set of code would be to specify font weight as 300 and font stretch as 100. So this code and this code do exactly the same thing. That's how you're gonna be able to use font variation settings to experiment with variable fonts, even while these properties aren't working in the way that they're going to work in the future. At the same time, remember that, when these properties are working the way that they are going to be able to work. If you can, use this code. Then you should use it instead of this code. So what this property is really for is when you need to target those custom axes like we saw with fonts like Decovar, where almost none of them are standard, and you need to work with axes that don't have a high level property to represent them at all. But for now, because it is the only fully functioning property, that's what we're gonna be working with for the rest of the course as we go through and explore what these four high-level properties are gonna be able to do. And then we're gonna dig further in through what we can do using custom axes and the font variation settings property. So we're gonna go through each of those four high level properties one at a time. And we're gonna start by looking at font weight. And how it works in variable fonts context. So we're gonna go through that in the next lesson. I'll see you there.

Back to the top