FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 Custom Axes

Hey welcome back to Up and Running with Variable Fonts. So far we've gone through all of the standard fonts, all of the pre-registered fonts, where you know in advance what each one of the little four letter labels are that represent each axes. So that you know how you can target those axes for changes when you're working with either high level CSS properties, or with the font variation settings property. But there is a massive world of axes that are available in variable fonts, that are completely custom, adjusting them could do anything that the font designer comes up with. And the four letter label that represents them could be anything. And one of the things to be aware of, as far as the difference between the standard axes goes and custom axes, is that any custom axis must be represented with uppercase letters. On the other hand, all of the registered axes are represented with lowercase letters. If you're looking through some code for a variable font, and you see upper case letters versus lower case letters, you'll know what those two things mean. And you already know if you want to modify the values that are corresponding with custom axes, that you need to use that low level CSS property. But the next question is, if these custom axes and labels could be anything, then how are you supposed to figure out which four letter label corresponds with which effect? I think we're probably gonna see more tools come along to help us with this. In particular, I'd keep an eye on Firefox, seeing as they're already working on dev tools for variable fonts. But for now, the best and easiest way that I've found of figuring out what four letter labels do what is once again, working with Axis-Praxis. So right here we're looking at the Gnomon font. And if we look over here at our two axes, we can see that neither of these are official registered axes, both of them are custom. We've got Time of Day and Shadow Distance. And even here we know the label of the axes but we don't know its four letter code. So what I do is just right-click on the text in question and inspect it. If we look down in the code, you can see that we've got some inline CSS and in this inline CSS, we've got our font variation settings property. And right here, we can see one of the four letter codes associated with this font and that is DIST, D-I-S-T, which is representing shadow distance. In this case, you can actually see that only one of the codes is showing up here. Sometimes you just need to move one of the sliders in order to get the value for that axes showing up, as well. And then when you move it, you're gonna see the code there change, so you know that Shadow Distance is corresponding with the DIST code. And then over here, Time of Day is corresponding with the TOTD code. So for now, I think that's the easiest way to figure out what code you need to work with and which axes they correspond with. And this actually brings me also to what right now is probably the easiest way to reproduce named instances in your CSS and to carry over the changes that you have made here by using the Axis-Praxis preview tool into your code as well. So let's dive straight into probably the most complicated variable font that we've got right now, and that is Decovar. We've got all kinds of different variations along here, this is an open source font. So what we're gonna do is grab this font, integrate it into a webpage using the same steps that we have in previous lessons. And this is a free font, so you can download it from GitHub, there will be a link to here in the notes below this video. The font that you wanna use is inside the font's folder, just use this one here, Decovaralphavf.ttf. Then put that through the converter to woff2 format like we did before, download the converted file into the font's folder for the project that we've already been working on. And then, just make another web page the exact same way that we have before. Call it decovar.html, put Decovar in the title. Load in the font file using a font-face declaration. Add in the basic HTML style and add a little bit of text. And then that should give you this representation of the Decovar font. Now just on a little side note, it's actually interesting to notice that Chrome has probably the most scratchy display of this font at the moment. Meanwhile, Firefox is looking a little bit better and so is Edge. So you can keep using Chrome for this lesson or if you want, you might prefer to use Firefox Nightly or Edge. All right, now let's pick one of these instances and try to recreate it in our page. How about this one here? I'm just gonna right-click it, Inspect, and now all we have to do is check out all of this inline CSS. Double click, so we can edit it, look for the font variation settings, line here, and then highlight all the way through until the end of this property, copy. And then in our HTML tag here, just paste in that line, so we'll save that and see what our results are. There we go, just like that, we've recreated that look from the Axis-Praxis preview page. We haven't had to manually go through and add in any of these codes, we haven't had to manually tweak values. All we had to do was just go into that CSS that's in line that we can see through the inspector and that just instantly recreates that look for us. And of course, we can do that with any of these so, even this sort of crazy junky looking one here. Just inspect that line. Double clicking here to edit. Copy the font variation settings property. Just gonna comment out the line that we put in before, add in a new one. And there we go, there's that very ornate style that we saw in Axis-Praxis. And of course, If you just want to set up your own variations here, anything that you want, set the sliders to whatever you need them to be. And then just do the same thing. Because this in line code will have adjusted depending on what you've changed in the sliders here. All right, so now we've covered all of the official registered axes, we've covered custom axes, we've covered high level and low level CSS properties. The only thing that's left for us now to make sure we're including in our CSS is some kind of fallback to fill that gap until all browsers are up to speed with variable font support. So we're gonna go through how you can set up a fallback for your variable fonts in the next lesson. I'll see you there.

Back to the top