FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.3 Variable Fonts for Freedom and Creativity

Faster loading is not the only reason for using variable fonts–they also provide a level of freedom and creative control never before had in web typography. Find out why in this lesson.

Related Links

1.3 Variable Fonts for Freedom and Creativity

Hey, this is Candace. Welcome back to Up and Running with Variable Fonts. In this lesson, we're gonna check out some of the ways that variable fonts are gonna make it possible for you to have more freedom and more design creativity when you're putting together your typography. What you're seeing on the screen here is a web site called AXISPRAXIS, there'll be a link to this in the notes below the video. And this is a really awesome site where you can go and check out some of these variable fonts that are coming out. We're actually gonna go into what this website can do in a little bit more depth later, but now I just wanna use this site to show you some of the cool, creative aspects of variable fonts. Now this first one here, Mutator Sans, is a really interesting example because it shows you a massive amount of variability that you can have in a single font. So not like in the last video where we had two font files, this is just one font file. But if you have a look over here on the right, you can see that we've got a couple of sliders where we can modify the width and the weight of this font. Now when you've worked with font settings before using CSS, say for example, you're setting the font weight, you'll know that you have to set those font weights to pretty strict increments. So they'll be 400 or 700, but not 564, for example. But with variable fonts, you can set your font weight at anything you want along the whole spectrum. So I'm gonna select this text at the top here. Now, I'm just gonna start modifying this weight. And check this out, I can smoothly change the weight of this font to anything that I want. There's no rule saying, I can only have it this bold or this bold. I can do anything that I want with it, whatever suits my design. And by the same taken with this font, we've also got the ability to modify the width. So, again I can smoothly change that to create any kind of look that I want for my sites. So that is how you see all of these different types of looks with this one font file. You can imagine, if you had to have a different font file for all the different looks that you see here with this font family, it would blow out your load speed like crazy. You would pretty much have to just decide on maybe two variance, three at most, and that would be all that you had to work with. Let's have a look at another example. Because width and weight are probably things that you're fairly familiar with from working with typography. But variable fonts are not restricted to just the kinds of variations that you might have experienced before. This font, Gnomon, has a built-in drop shadow, and if you have a look at the sliders here, we can actually modify the time of day. To give us a different angle on the shadow. And we can modify the shadow distance, and that's not something you're gonna see on a CSS setting anytime soon. This is just completely different, the font designer has decided to go ahead and build a drop shadow into this font. And the doors are really wide open for font designers to do anything that they can think of with fonts. And that brings us on to the next font that I wanna show you, and that is the decovar font, which is probably the most interesting variable font that's available right now. Have a look at this, all of these different styles are all made from the one font file. All that's happened is that one font has had its settings changed. Then here we can see we've a bunch of different sliders, and these represent all the different things that you can change in this decovar font. So I can start changing things up, and I can completely turn this iinto any kind of font that I want. It's incredibly flexible, and this is just one of the early fonts that we get to work with. So there's gonna be a whole bunch more variable fonts that come through, and it's gonna be really, really interesting to see what kind of creative opportunities that's gonna bring to us. All right, so between the massive gains on load speed and the whole world of opportunity for design and creativity that these open up. I think you're probably starting to get the picture of why variable fonts are so interesting. So now we're gonna start moving on to how they actually work and what you need to know to start using them yourself. The first thing we're gonna look at is the actual settings that power variable fonts. The settings are actually called axises. So we're gonna go through what an axis is and how it drives variable fonts in the next lesson. I'll see you there.

Back to the top