Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:18Length:1.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.5 Font Style (Slant/Italic)

Hey welcome back to Up and Running with variable fonts. So far we've talked about two of the four high level properties that we're gonna be able to use to control variable fonts. And in this lesson we're gonna talk about the third, and that is the font style property. Now unfortunately, the weren't any open source, freely available fonts that I could use to demonstrate this to you in code. So what I'm gonna do is just show you the code that's involved. And then we're gonna go through Axis-Praxis, and have a look at the effect of modifying the axes in question. All right, so the property that we're talking about is font style. And this is something that you'll already be familiar with, if we're using to set italics on regular text as we already have it. And as we mentioned earlier, there are two axis that it's affect, it affects the italic axis which is represented with the label itel. And it also represents the slant axis which is represented with the label SLNT. So if we want to use font-variation-settings to target the italic axes, we would do that with the ital string. And then we would add in a value. Now if a font designer is using the officially registered italic axis, then the value range provided has to be somewhere in between 0 representing no italics at all just regular upright text, or 1 which represents a fully italicized state. However, If we want to target the slant axes, we use slnt as our string. And then this value can be anywhere between negative 90 and positive 90. So it might seem a little bit counter-intuitive, but if you want to make letters lean forward using the slant axes, then you have to use a negative number. And the furthest that they can be made to lean is a 90 degree angle. So basically if you put in a font of negative 90, if a font allowed for that value, those letters would by lying pretty much flat on their side. If you put in a value of zero, the letters would have not slant at all applied to them. And if you put in a positive value in the other direction, let's say 90 then those letters would be leaning all the way backwards as far as they could go. So just remember, the italic axis goes between 0 and 1 and the slant axis Goes between negative 90 and positive 90 with a negative value representing a forward slant. All right, now let's head over to access practice and I'll show you a couple of these things in action. Now the question that you're probably asking is, well what is the difference between italic and slant anyway? And how come they're two axes that are being targeted by one property? Well typically, the difference is that when you have true italics you have different glyphs, so the actual shape of the letters is different. A good example of proper italics is Libre Franklin that we've been using, and that is why you have these two different font files here. Because the Roman version has differently shaped letters to the italicized version. They're not just meant to dip forward. However if you're using it slanting, which can also be referred to by the term oblique, you're actually taking the exact same letter shape and you're just keeping it a little bit either forwards or backwards. Now because of that distinction, the fact that italics are supposed to represent different glyphs, different shaped letters, and slant is just supposed to be. Tipping a letter forward, it's assumed that any font is only gonna be using italics or slanting. So when you use font style the browser should be able to look at the font file and see if it's using italics. Or slanting, and then it should be able to interpret the values that you put against that property correctly. So that is how strictly speaking, and technically speaking, those values are kind of supposed to be used. But at the moment, it seems like fonts are being a little bit more loose with those definitions, so I'll show you what I mean. So we have this font here Compressa, which uses the italic axes. But as far as I can tell there doesn't seem to be any change in the shape of the glyphs. There are just actually, sliding them forwards. But it's using the italic axis nonetheless, probably just because the word italic is a little bit more familiar to us. And you can see, you might have to bring up this page yourself to look at it properly, again because the numbers are quite small. But you see that zero represents no italics, and then you can go all the way up to 1, which is the maximum italic. Here we have the winner font, and this font uses the slant axis, and it might seem a little strange that the slant slider is all the way over to the right. You kind of would intuitively think that if you want something to slant forward, slant to the right, then you would need to move a slider to the right, but it's actually the opposite. Cuz you remember, that a slant value corresponds to an angular rotation. So when you want to slant this text forward, you actually need to move into the negative. So as I drag this down, the number moves into the negative and we see the font slanting forwards. And you'll notice here that it maxes out at negative 15, which represents a 15 degree slant. Even though it theoretically could go as low as negative 90, it's still up to the font designer to determine what angle is gonna be the maximum that the font can still look good at. And you'll notice also it doesn't go into a positive range because the designer has decided they don't want this font to be able to slant backwards. This is another example we have Normschrift again, we drag this into the negative, we see the letters slanting forwards and that also goes between negative 15 and 0. And then this one is seemingly a bit of a mix, because it's using the term slanted rather than slant, and the range goes from 0 all the way up to 1,000. So that one has pretty much decided to go its own way, so as I mentioned, even though there are rules and guidelines, things are being approached a little bit more liberally. We may see that tighten up as time goes forward, and we may see a bit more standardization. But for now particularly with the italic and slant axes, just be aware that things might not be 100% by the rulebook. When you do have fonts that are going by those rules. Then you'll understand what you're looking at with italic axis between 0 and 1, and slant being between negative 90 and up to positive 90. So when it comes to actually using font style property, when it's ready we can assume that if you have a font using the italic axis, if you want it to be fully italic. You'll set that value to font style = 1, whereas if you have a font using the slant axes, you'll set that font style to somewhere around negative 15 if you want it to be fully italicized. And in both cases, setting the value to zero should set the letters perfectly upright. All right, so that covers the font style property, as well as the italic and slant axis. We just have one more high level property to cover, and that is the font optical sizing property. So we're gonna go through that, in the next lesson, I'll see you there.

Back to the top
View on GitHub