FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Font Stretch (Width)

Hey and welcome back to up and running with variable fonts. In the last lesson, we looked at one of the four high level properties that we're gonna have to work with variable fonts. And in this lesson, we're gonna look at another one, and that is gonna be font stretch, which is gonna control the width axis. So in order to do that, we're gonna be working with the Voto Serif font. You can see with this slider here, this is our width axis. And I'm also gonna show you another thing that can be very useful with the Axis-Praxis website, as long as you have a font with a license that allows you to freely use that font. Now, I'm gonna explain what I mean. The Voto Serif font we can see here is a part of this repository. And if we look at the license, There, we can see that this is an open license. That means that we're okay to download and use the font. However, what I found was when I downloaded from this repository and then converted into a WAF2 file, the font that I got as a result didn't actually respond to variable settings. So instead, to get a font that definitely works, obviously, we know this font works, I'm actually gonna pull the font file off Axis-Praxis. The way I'm gonna do that is I'm gonna bring up the source in this window here, expand the head. And then if we have a look inside the style with the id webFonts. And along here, you can see the URL of the font. So I'm just going to copy this part of the URL, and I'm gonna paste it onto the end of the Axis-Praxis URL, which is then gonna give me a file that I can download. You can see that I've already done that. This was the file that didn't work and this was the file that did work. So you can just pull that down into your project. [SOUND] Now don't make a habit out of downloading files from a site like this. But if you're really stuck, you really need to work with a font and you can't get a working version of it and then this one option. And of course, don't do that with a font that you don't have the rights to access. Some of the fonts on this site do require a purchase. So make sure that you do that before you make use of a font. All right, so now we're gonna make another file. We'll call this one votoserif.html. And then we're just gonna set up the file in the same way that we did with our Libre Franklin. So add in a basic code, Voto Serif. Then we're gonna do the same thing that we did in this page here. We're gonna add a font-face rule. I'm just gonna copy this. It's gonna make it a little bit quicker. So we'll add in our style tags. And then in between our style tags, we'll add our font-face rule, and now we can just edit it. We don't need font-style on this one. We want the font name to be Voto Serif. And then here is the font we wanna use. So I'm just gonna highlight it and press F2 to go into renaming mode. Copy the font name and I'm just gonna paste that in here. So that is gonna load up our font. And we'll grab this HTML styling here. Just go through this as quickly as we can, leave these other aspects. Change the font-family name we're applying to Voto Serif. And then we just need a little bit of text, say, Voto Serif Variable Font. So we'll get our Libre Franklin file opened here from before. So all we need to do is put the name of the file in that we just created, which was Voto Serif. And this our Voto Serif font. So to help make this look a little bit more like what we see here, we're gonna start by increasing the font size. So with this one, let's bump that up to 5rem. So now that's much larger. And what we're gonna be looking at is the width axis of this font. While we're at it, we're also gonna look at the fact that with font variation settings, you can actually target multiple axes at once. So we're gonna add in our font variation settings property. And before we move into adding a width axis, we're actually gonna target the weight first and bring it down quite a bit. So here we're gonna do just what we did in the last lesson. We're gonna put in the four letter label for weight, which is wght. And we're gonna bring the weight down to 60. That weight of 60 is something that I've taken from this figure here. So we know that this text here has a weight of 60. And now we can start working with the width axis as well. So all we need to do is add a comma. And now we can add in another axis name. So add our single quotes. And now to target the width axis, we're gonna add wdth. And once again, let's simulate what we have here. Now we're gonna try to reproduce the width that we have showing up, which is about 92. So we're gonna add a space, set that with 92, and then end our line. Now this width axis here, when we get full access to our high level properties, this is gonna be controlled with the property font-stretch. I'll just comment that out for now, just leave it there as a reminder of what we're working with. So save that, and let's check out our results. And then sure enough, there we go. We've got a really nice, elegant looking font that is the same width and weight as what we saw on Axis-Praxis. Now with each different type of axis, there are rules as to what the range can be. Some axes are allowed to go into the negative and some aren't. Some have an upper limit and some don't. Now with the width axis, the only rule is that the value has to be greater than zero. So you know that whatever you're dealing with a particular font, you're never gonna have to deal with negative numbers. However, what we're seeing so far with variable fonts is the range can be quite different from font to font. If we look at the range on Voto Serif, which we can do by dragging the width slider all the way down, the bottom figure that we have is 50 and the highest figure is 130. Again, apologies for these tiny numbers. Unfortunately, the layout for the site won't let me shrink it down to a size where I can really show those numbers to you clearly, so I'll just read them all out for you. Then we have the Compressa font, which is a completely different range. Its lowest weight goes down to 10 and its highest goes up to 100. You can also have fonts where the range is a very small amount. So Avenir Next is only 100 at the top and 75 at the bottom, so it's only got 25 points of variance. But then on the other end of the spectrum, you have the Winner font, which goes all the way down to 0 and all the way up to 1,000. So you've got a fairly wild amount of fluctuation. Obviously, the wider the range of a particular font, the more fine-tuning you're gonna be able to do. But basically, don't expect there to be any great deal of consistency in between one font and the next as far as width goes. You are just gonna have to take that bit of time to get to know each one. Who knows we may see some standardization in the future, but for now, just be ready for that fairly high amount of variance. And then, finally, bringing that all back to font-stretch. If we're gonna recreate this setting here using the font-stretch property, at this point in time based on the information we have, we'll assume that we would say font-stretch: 92. All right, so that is everything that we know about the font-stretch high level property and the width axis at the moment. In the next lesson, we're gonna talk about the third of our high level properties, and that is font-style, which controls the slant and italic axes. So I'll see you in the next lesson.

Back to the top