FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Font Optical Sizing

Hey, welcome back to Up and Running with Variable Fonts. In this lesson, we're gonna talk about the last of our four high-level properties that we can use to control variable fonts. And that is the font optical sizing property. So for this, we're gonna go back to our Voto Serif font that we're working with lesson before last. If you have a look at this font, we have it looking pretty nice. But if you compare it to what we see at Axis-Praxis, you'll notice that it looks slightly different. There's a bit more thinness in certain areas of the lettering, whereas our font is a little thicker all the way around. What's creating that difference is the optical sizing axis. So the basic idea behind font optical sizing is that when you have your text very small, you don't want to have any of the kind of really thin lettering that you see here in this text. Whereas on the other hand, when your text becomes very large, you don't want it to be super chunky, you wanna have a little bit of variation in the widths of different parts of the letters. So optical sizing allows you to control that. So to demonstrate, I'm gonna drag the size of this font way down. And you'll notice it's actually dragging the optical size dragger with it at the same time. But to demonstrate though, we're gonna have this text go very small, and then we're gonna drag the optical size all the way up. You see that when the optical size is up too high, you have all of these thin, sketchy parts of the letters that are very difficult to read. Whereas if we drag the optical size down, now it thickens up those sections. So we still have the same look in the font, but it's a lot more readable. On the other hand, when we drag this all the way up, but we have the optical size low, now it looks way too chunky. It doesn't have any of that same sort of elegance. If we have the optical size higher, now we have this nice variation, this nice calligraphy type of a look to the lettering. So once again, when these high level properties are ready, we're gonna be able to use the property font, optical-sizing. And then we'll be able to specify the value that we want. So we're just gonna comment that out for now. And in our font-variation-settings property, we're gonna add the four letter label for the optical sizing axis, which is opsz. And then we can enter in an appropriate value. So once again, we'll refer to Axis-Praxis, and I'm just gonna refresh the page so that we get back to our defaults. And here, we can see that the optical size is set to 72. So we go back to our code, we'll set our optical size to 72, and save. And now, there we go, we've got a variance to our font. We've got the nice thin aspects to our lettering here, while the downstrokes on the letters all retain their thickness. So, with the case of this font, it's almost more of design preference, tuning in that optical sizing. But with some fonts, it can really be essential to have that optical sizing. Because when you change other parameters, it can completely blow out how the font looks. So for example, with this Amstelvar font, when we shrink down the width of this font, you can see that the letters get really crowded really quickly. And they start to look pretty difficult to read. It does help to reduce the weight a little bit, but it's still not quite right. But when we change the optical sizing, now you can see that we're getting an adjustment that's bringing us back to much nicer looking lettering. So if you have a font that's not looking quite how you want it to look when you're modifying the width and the weight settings, then jump into the optical size settings and have a play with that, too. And it can correct you're lettering and bring it back into legibility. And then, once again, just to bring that back around to our high level font settings, to our high level properties. When everything is ready, instead of using font-variation-settings, you'd just set font-optical-sizing. And then you would set it to 72 or whatever value was appropriate. All right, so now we've gone through weight, width, italic, slant and optical sizing. So those are the properties, font weight, font stretch, font style, and font optical sizing that go along with them. So that's all of the official registered axis and properties. Now we wanna look at what happens when you need to deal with custom axis. We're gonna go through that in the next lesson. I'll see you there.

Back to the top