Variable Font Resources

[00:00:00]
>> Jason Pamental: Some resources, Axis-Praxis is a fabulous website. If you haven't seen this yet, axis-praxis.org is put together by a friend of mine, Laurence Penney. And this is a playground. He put this up just weeks after variable fonts were initially launched as a way for you to go select any one of these blocks of text.

[00:00:23]
And there, he has a whole slew of variable fonts that have been given to him to include in this, so that you can select any block, change to different variable fonts. It will show you all the available axes of variation with a slider and a number value, so you can play around with them.

[00:00:39]
You can click on the CSS link above the word font in font variations and see the CSS in real-time, or copy it into your own project. It also exposes all the OpenType features that are available. So ligatures, fractions, number styles, we'll look at a bunch of those other features, are all accessible here too.

[00:00:59]
So it's a great tool for you to start to see what's possible with some of these different fonts. The Variable Fonts site, or v-fonts.com, is put together by Nick Sherman as a catalog site. So he's trying to make sure that he can list every variable font that he sees come onto the market, either a professional commercial one, or open source efforts.

[00:01:24]
And if you just go to GitHub and search variable fonts, you'll find a whole slew of variable font projects that you can just download and start to play with. But there are now starting to see some really interesting commercial ones coming out.
>> Jason Pamental: This project on GitHub from Monotype is one that you can download and play with on your own system.

[00:01:46]
And what it looks like by default is it just says drop something here up top. And you can drag and drop a variable font that you might have on your own system, and it will load it up, show you all of the different instances, and the number ranges with some sliders.

[00:02:00]
And then give you a live, editable text area down below so you can put whatever text you want in there and create your own little live text widget. That helps you to kinda figure out, what are the named instances? What are the different values? What are the low and high-end number ranges that you can play with?

[00:02:17]
And then actually see it with a block of text.
>> Jason Pamental: Microsoft also has put out an intro to variable fonts website. That's also linked in the slides. So there's a ton of information here with links to lots of resources and explanation about how variable fonts work and what they do, all in a really nicely designed page.

[00:02:40]
Type Network, it's another one that I've been working on with them to get this website launched. This will showcase how variable fonts work, how you might use them in publishing, and a bunch of fonts that they are going to have commercially available.
>> Jason Pamental: Monotype also put up their own intro to variable fonts a few weeks ago, and I had the good fortune to get to design the demo for them.

[00:03:08]
So this page is linked from that one, and this is using a variable font that they released that anyone can use. We actually will be playing with this one as well, FF Meta. It's a great typeface, and they've introduced that as a variable font that's sort of free to use for quite a while, I think till 2019.

[00:03:28]
And they'll have other commercial options available. But this one has the entire weight range and italics and the file's 84K. I mean, it's kind of incredible what you can get out of it. And what I did with this page was just try and show the range that you can get when you have that at your disposal.

[00:03:50]
There's another one from my friend Oliver, put up this fantastic site using Output Sans, another variable font from David Jonathan Ross, of the Font of the Month Club fame. And this page, likewise, has a fantastic explanation of variable fonts, but also showcases what they can do all within that page.

[00:04:08]
So these are great for not only getting inspiration, and seeing what they can do. But also passing it along to a designer that you know, or a manager, or anybody else on your team so they can actually see what variable fonts are all about in variable fonts. And that's really the best way to really see exactly what the technology can do.

[00:04:31]
And I've got a slew of stuff up on CodePen that you can play around with. But more important is that I'm showing this to you in the Firefox Nightly build. And if you look down below, I have just opened up the dev tools. There's now a three pane view and a font pane and it will showcase everything available in that variable font, right in the browser.

[00:04:53]
So this is probably the most useful way, because you can look at your own layout. So as you're working on your site, you actually have these tools right here that you can play around with, all of these sliders, with any individual element. It will update the CSS live.

[00:05:08]
You can then just copy it right back into your project, so it's incredibly helpful. They're working on even more tools in here. Also, if there are named instances, there will be a drop down right there that will let you pick them. And it will update the sliders and the CSS values live for you, so we'll take a look at some of that too.

[00:05:27]
But that browser is just running rings around everybody right now in terms of implementation of useful things for variable fonts. It's also incredibly fast. If you haven't looked at Firefox lately, in the last six months or so, you really need to try it out. It's really worth it.

[00:05:44]
It's a whole new rendering engine. It's definitely the fastest thing on the web right now.
>> Jason Pamental: In terms of fonts that are becoming available, when I started giving talks on this, there were like three. Now there's dozens and more coming out all the time but what a lot of people are gonna be asking about are what about the open source ones?

[00:06:08]
So this is just a screenshot of work being done on Roboto. So there are a number of core variable fonts that are being worked on so that we'll have our variable open sans or whatever. I think there's a source sans variable that's in the works and a bunch of others.

[00:06:25]
So we'll have good core usable variable fonts that we can start to rely on pretty soon. And there are lots of commercial ones that are already shipping.
>> Jason Pamental: This is just an example of playing around with font grade in a UI element.
>> Jason Pamental: So giving things like a different hover state or whatever, that can really help draw attention to something without being too heavy-handed.

[00:06:52]
Or changing the size and shape of the buttons. And this is really just a little bit of fun. This is Decovar in the hands of Mandy Michael. She's just a really fantastic designer from Australia and she did some really beautiful experiments just animating things. And again, maybe it's not necessarily the most functional thing.

[00:07:15]
But in terms of just a way to add a little bit more of an emotional connection, something that's a little bit more fun, clearly, there's some interesting things that can be done.
>> Jason Pamental: So that is our brave new world. We're gonna start playing around with stuff in code.