FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Font Axes (Settings)

At the core of what makes variable fonts work is each “axis” they contain, with “axis” being the name given to the modifiable parameters of that font. Let’s check out some variable font axes in this lesson, looking at how they work and what they can do.

Related Links

2.1 Font Axes (Settings)

Hey, welcome back to Up and Running with Variable Fonts. In this lesson, we're gonna start looking at what actually makes variable fonts work, and that is what's called the axis that each variable font contains. And basically, each axis that a font has is just a setting that you can change, controlling how it looks. So we already saw modifying things like width and weight. So if you have a font that has a width and a weight setting, then you can also say, it has a width axis and a weight axis. And it's two types of axis that a variable font can have. There are official, registered axis tags and those tags are a part of open type itself. The second type of axis is a custom access that any designer can decide on for themselves and can add into a font. And what you're looking at on the screen here right now is the five currently registered official axis or open type variable fonts. There may be more official axis in the future, but for now, these are the ones that we have. So you've got Italic and Slant which are almost the same. And we're gonna dig into what each one of these axis represents a little bit later. And we are going to discuss what the differences between Italic and Slant, because they both give you forward pointing letters. You also have optical size, which basically, helps you control how legible your letters are at different sizes. You have width, which as the name suggests, controls the width of the letters and you have weight, which controls the weight of the letters. So it's a quick list of those five official axis. Now, let's go back to Axis-Praxis and we'll have a look at those axis in action. First up, we got the Voto Serif font and you can see over on the right here. This is where we can mess about with the axis that control the look of the font. A variable font can have one axis or it can have 20, it's totally up to the font designer. In this case, we have three, so I'm gonna select this text here. And you already saw this before, but we'll just quickly go over it again. So that's the width axis. We already looked also at the weight axis. The optical size axis, again, we'll dig into these in more detail later, but this allows you to control how legible the letters are. So if I wanna decrease the size of this text here, then I can mess with the optical size to make it more legible or if I wanna increase it. Then I can do the same thing again. So that's three of our five official axis and in the Winner font, again, we've got width and weight. And this time, we're using the slant axis, and then the fifth is Italic. It's gonna give you the same effect, so we won't go over it in any more detail until a later lesson. And then if we just look back at the Decovar font, again here, you can see that we have a bunch of custom axis and the only one that's on the official list is the white axis. But everything else is completely custom. So I think that when you first hear people talking about the axis in variable fonts, it's not always 100% clear exactly what's meant by that. But you really don't need to think of it with any sort of complexity. All you need to think about is the fact that an axis is a setting and a setting can change the way the font looks. You got five official settings or axis. And you've got an infinite possible number of custom axis that you'll have to look up on a case-by-case basis for each variable font that you decide to use. And because you can have all kinds of different axis in any particular font, it can get difficult to keep track of what combination of settings actually looks good on a font, and that is why we have something called named instances. So in the next lesson, we're gonna look at what named instances are, and what role they currently play in the web design workflow. So I will see you, in the next lesson!

Back to the top