FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Wrapping Up

Hey, welcome to the final video in Up and Running with Variable Fonts. This is just gonna be a quick recap. Come back to this video anytime that you need a refresher on the most important elements of working with variable fonts. All right, first up, why use variable fonts? Number one, because they'll load much faster. You can do the job of seven or eight font files with a single font file. Two, they give you a lot more freedom and ability to be creative with your typography, because you have all kinds of different ways that you can change up a font. And you get to decide exactly how that font is gonna look in your design. Variable font fundamentals. Variable fonts have settings that are referred to as axes. And it's the values that are associated with each one of those axes that determines how a variable font is going to look. Those axes can get fairly complicated if there's a lot of them. So many font designers will create something called named instances that are a quick and easy way to bring up different combinations of axis settings that have already been determined to look good with that font file. As for where to find variable fonts, the number one place is Axis-Praxis have a great spreadsheet that they manage. It's a comprehensive list of fonts. We also have For preview tools, again, use the Axis-Praxis website. Or if you're comfortable with building software from source, you can try the font view application which you can get on GitHub. Another option for previewing is Adobe software, which you can also use for UI design. Other UI design tools right now don't support variable fonts, but some of them have shown interest, so definitely keep an eye out. Browser support right now is strongest with Chrome and Edge. Safari is good too, but you must have Mac OS 10.13 or higher. Firefox support is on the way. And right now you can use Nightly, which does have support for variable fonts and also has some very interesting looking dev tools coming out for working out with variable fonts. Okay, on to coding with variable fonts. Deploy your variable fonts using at font face rules. And control your variable fonts using high level properties and low level properties. We have four high level properties, we have font weight, font stretch, font style, and font optical sizing. We have one low level property, which is font variation settings. Our high level properties aren't working in browsers yet, so in the meantime, use font variation settings to replicate the effect of those high level properties. But when they are available, use those properties wherever you can and use font variations settings only when you have to. The font weight property represents the axis wght in lowercase. The values that you can apply in font weight can be anywhere between 1 and 199. But the range of values for a specific font can vary wildly, so be sure that you check the specific font in question to see what range of values are available for that font. Font stretch represents the wth axis. Width values for this axis can be anything greater than zero. Again, check the font for specifics. Font style interacts with the slant, slnt axis, or the italic, ital axis. Fonts will only have either slant or italic, so we ought to be able to use the font style property to interact with either one of those axes. If a font uses the slant axis, it's value range could be anything between negative 90 and positive 90. A negative number indicates leaning forward. A positive number indicates leaning backwards. And zero indicates straight up and down. As usual, check the specific font to find out what the appropriate values are to use. If a font uses the italic axis, its values will range between 0, which is fully upright and 1, which is fully leaning forward. Font optical sizing represents the optical sizing axis which is labeled opszed or Z. This property is used to modify how much variance there is in the thickness of the strokes of the letters, and it enables you to enhance legibility and readability at different font sizes. Custom axes could be anything the font designer decides they should be. They're also represented by a four letter label. But custom four letter labels are always in uppercase, while official are in lowercase. Right now, the easiest way to figure out what custom axes are available in a particular font is to go to Axis-Praxis, preview that font, and then inspect the in-line CSS to see what labels are being used. And to set up fallbacks for your variable fonts, use an at support rule. Check the support of the font variation settings property with just a normal value. And then put all of your variable font code inside that support detection rule. Use an inverse check, look to see if that property is not selected, and then put your fallback code inside that check. And that is everything that you need to know right now to start working with variable fonts. We may see some developments in the future, we might see some new things coming in. We might see some tweaks of what we have right now with the system, but things should remain fundamentally the same. So I hope that you've really enjoyed working with variable fonts and that you're feeling confident to get out there and start using them. Thank you so much for taking this course and I will see you in the next one.

Back to the top