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

2.2 Named Instances

There can be many combinations of all the different axis settings available in a font, so sometimes you’ll want a shortcut to bring up one particular look for that font. That’s where named instances come into play, and we’ll take a quick look at what they are in this lesson.

Related Links

2.2 Named Instances

Hey, welcome back to Up and Running With Variable Fonts. In this lesson, we're going to talk about what named instances are and what value they offer you as part of web design workflow. So we're looking at our Decovar instance again. And here you can see we have so many different settings and so many different looks for this font. But if you're trying to manually recreate all of these looks from memory every time, it would get very difficult, very fast. So what we have is the ability for font designers to include something called named instances in their fonts that are something like a bookmark for a particular combination of settings in each of the variables. So if I select this text up here. And then, look over at this instance area on the right. I can see that there's a whole bunch of different, named instances. And when I switch that up, you can see that we get a completely different look. For the font each time we choose one of these named instances. Now, unfortunately the downside right now is that even though this information is inside the file, so far there is no way in CSS to specify that you wanna use one of these named instances. Hopefully, that's something that we'll see come up in the future. But right now, it's just not there. However, named instances are still a useful thing to be aware of as part of working with these types of fonts in web design. Why? Basically, because they give you an easy way to look up combinations of settings that work really well, that you can then reproduce in your designs. But named instances are also useful, even if you don't have the kind of complexity that you have with a font like Decovar, and I'll show you an example. So we have the Libre Franklin font. We looked at this earlier as well. And this is just the regular version of the font that's hosted on Google Fonts right now. You can see that we have all of these different variations of the font, and each one of them has a name. Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, and so on. If we look at the variable font version of Libre Franklin, and we look at the named instances that it has. We have the exact same set of names. So this is actually the italic version of the font, but so we've got Semi-Bold, italic. We look at the Roman version. Then we have Semi-Bold. So you have all of the same looks that we have in the main font. And why is that useful? It's useful because this can act as a guide for us to recreate in CSS the same looks that we have in the regular version of the font. So if we know we want to reproduce Bold Italic, then we can take a look at the italic version of the font. And have a look at the named instance that represents what we want. And then, we can see the value that we need to put against the axis that's controlling how the font looks. And we're gonna be digging into putting together code later, so I'm just gonna quickly show you how this might look in application. This is the code for the demo that I showed you earlier in the course, illustrating how much faster variable fonts can load. And what I've done here, is just create a class name for each one of those named instances. And then, I've carried the settings over from that named instance, into my CSS. This one just uses that one axis, so it's relatively simple to code in CSS. A little bit later, we'll go through how you can handle more complex sets of axes as well. So that gives you an idea of what named instances are, how they relate to access settings, and how they're actually useful in web design, even though we can't access those named instances through CSS just yet. All right. So, now you're getting your course the fundamentals of variable fonts, which basically boils down to their axis and their named instances. The next question is, well, how do you actually find variable fonts? Variable fonts is still relatively new, so they can be a little tricky to find. So, in the next lesson, we're gonna go over how you can best look for variable fonts. So, we'll see you in the next lesson.

Back to the top
View on GitHub