Font Variation Demos

[00:00:00]
>> Jason Pamental: I just wanted to put this up again just as a reminder of this as a useful tool to figure out what your font can do. It doesn't have to be a variable font. So any kind of font that you want to work with, if you want to see if they're open type features, any of those things, you can just drag and drop on there.

[00:00:21]
And it'll analyze it for you and give you a good low down on what's there. Axis-Praxis is another one that I go to all the time to test things out and also because you can drag and drop a font here as well. And then access it and turn features on and off.

[00:00:41]
So with this selected this text block here, it automatically says, it's Voto Serif and it gives me the different sliders here and it also tells me what Open Type features are here. So we've got fractions, so we can just go ahead and type in here and then we can see they are not on by default.

[00:01:06]
But we can turn them on or force them off or leave it standard. Same thing is true with ligatures or anything else that you see here. So those are really helpful things to kind of start to get an understanding of what you have to work with. And what you have available to you at a given time.

[00:01:27]
You can also then kinda play around with tight pairings here pretty easily. So you can do things like change the type face that is in use. In some of these different, excuse me, different blocks to see how things look together. I wouldn't say it's necessarily the most robust type setting platform.

[00:01:51]
But it does let you very quickly play around with stuff and just kind of knock things together and sort of prototype your typography a little bit. And it's really easy to use, and you can always get that CSS, you can edit the values here and reapply it. But it makes it real easy to poke around with things and copy those resources, and take them back into your own project.

[00:02:19]
>> Jason Pamental: I wanted to show you a few of the other variable fonts, and kind of what's interesting about them. So you can see what's some of the other things are available. So David Jonathan Ross has been playing around with colored fonts as well. And it's got some really incredible things that you can do.

[00:02:37]
That's another one of those things that's not terribly well supported in browsers just yet, but you can see a lot of interesting things are coming. Being able to, once it's fully supported, actually specify and change any of the colors that are available in that font. But you can kind of see what you can do to play around with the thickness and thinness of the interior stroke weight, as well as the serifs themselves.

[00:03:04]
Roslindale is the one that I've been working with on my own site, and that's actually what I used in a lot of my slides. And you can see this one can actually work pretty nicely as a text face, or as something that's a little bit heavier to use for headings.

[00:03:22]
>> Jason Pamental: So FF Meta was the one that I used in another project. You can see all the way from a really super light hairline, all the way up to something really super heavy. But some of the more interesting ones have several other axes that you can play with.

[00:03:39]
And once you get into some of those differences, I would like us to find one here that offers, okay, here's a little more crazy one. You can set the wind direction on this one, so again, like the axis, it can really be a lot of, really can be kind of anything that the type designer wants to play around with.

[00:04:04]
And because this is all regular text, you're not really sacrificing the readability for somebody with assisstive devices. You're just adding to the design. Barlow's an interesting one in that this one has started to gain a lot of popularity on Google fonts. It's a pretty nice type face. It's pretty versatile.

[00:04:30]
It's got a width and a weight axis and it's got the numbering as a little bit weird, but, that's okay. And so the standard version is available on Google Web Fonts, but it's an open-source typeface. You can download it from GitHub and you can make a variable font out of it if you have the right tools and really do quite a lot with it.

[00:04:53]
I'm not exactly sure what time of day is here, but that's what they want to call it.
>> Jason Pamental: So just wanna make sure that you can see that it's not just for standard use typefaces. You might have really interesting calligraphic effects that you can get just by playing around with these.

[00:05:26]
So you can imagine that as a heading, like on a clothing website, and there's all different kinds of brands that might be kind of an interesting effect. Where you would vary the weight and the swashes to really get a beautifully sort of drawn effect on that when the screen loads in in the first place.

[00:05:46]
So a lot of it is not necessarily how you use it just in a static sense, but because all these things can be animated, it actually can provide something that moves and changes over time. So as it loads and then it does something, it gives you an opportunity to create some really interesting effects.

[00:06:07]
So this is Bahnschrift, this is one that actually ships in Windows 10. And before they added the width axis this thing was only 26K, I mean, that's really incredible. That's the size of like pretty much any other standard font, but it had a width from 300 to 700 and a character set that's complete enough to build into an operating system.

[00:06:31]
So I mean this was not a lightweight, half-baked kind of thing. This is a really well-engineered typeface.
>> Jason Pamental: So this is the crazy of deck of ours, so I showed you one, I do not even remember which one it was. But this is just kind of a technology demo where you can see this actually goes from a serif to a sans serif, but it changes the shape of the serifs.

[00:07:01]
You can have an inline stroke, change the terminal shape, the worm effect, whatever that is. Flare things quite a bit more, so there's a tremendous amount of variability. And one of the reasons I like to show this is think about people with dyslexia, think about the challenges that they face differentiating between characters.

[00:07:27]
And when everybody's using something like Open Sans that has really somewhat nondescript characters being able to do something like subtly shape the terminals. Or the tops of the ascenders or descenders to make the B ad D slightly more differentiated. That's an accessibility switch that would make night and day difference to somebody with that kind of reading comprehension issue.

[00:07:52]
So there's a difference between being able to use something and not. So I think that's another one of the potential uses of variable fonts, is to put more control on the hands of the user. Now, it is a challenging notion because that means giving up more control as a designer, but in a controlled way.

[00:08:12]
So you're defining the space, you're giving people the controls to use, and you're allowing them to have some flexibility in how they take in that content. It's not so different than having to deal with different length headings. Again, we have to give up a little bit of the explicit control to give people a more define way to interact because ultimately our job is to help them get to that content.

[00:08:37]
So again, anything that we can do to make that easier, whether it's increasing the grade of the text, allowing them to change the shape of the letters a little bit. Or for people that suffer from crowding, which is a subset of people with dyslexia. Microsoft research found that if you increase the line height and the word spacing, you could increase reading comprehension by 50% for people with that condition.

[00:09:02]
That's all standard CSS. So that's a button somebody could push to completely change the way they could interact with that content. And again, make the difference between a child learning and not. That's really powerful, that's stuff we can do with design, with CSS, with these variable fonts, things that were never before possible.

[00:09:19]
That's why I really like just being in this time of experimentation to see what's possible and just having all these things to play with is really tremendous. I did just gloss over the poop emoji. This was a demonstration of a color font. Actually, by my friend Rule that made that other bot website that we were looking at.

[00:09:43]
So here's Amstalvar. And here are all the different axis. So this is the one that's in many of the demos that we have to play with and you can see it's got the standard sort of width and weight stuff that's interesting to play with. But the optical size you can see the extreme differences that you can achieve with that.

[00:10:04]
So that's useful for physical size but it's also useful for just changing the nature of the character of the font. So if you don't really want that fine detail, you can just force the optical size using font variation settings to set it to a specific value if you would really prefer to have that heavier effect.

[00:10:24]
And that's just fine, it's totally up to you. But there's fun things that you can do to change the shape of the serifs, so you can see how that's kind of moving and changing. Sort of changes the effect of it. Now,
>> Jason Pamental: Following along with why transparent and why opaque and etcetera mean, is a little bit kind of hard to follow.

[00:10:52]
But you can see there is like the change in the heights of the ascenders and the descenders. So you can play around with things visually, but also in terms of copy fitting and type setting, that gives you a lot to play with. And,
>> Jason Pamental: Also separately the height of the upper case letters, so it actually gives you an awful lot of stuff.

[00:11:16]
It's not likely that you will find many type faces that have this much to play with. And it is also going to mean that that's not going to be the skinniest font that you could load. The more axes of variation, the larger the font file, so that's probably not going to be the best answer for a lot of uses.

[00:11:36]
Typically, you're probably gonna see one to three axes of variation as the most common. That's, frankly, hard enough, but it does give you an awful lot to play with.
>> Jason Pamental: Well,
>> Jason Pamental: Having more or less Cookies, more or less fringe, all good things.
>> Jason Pamental: No, that's not really doing much.

[00:12:12]
So there's some different examples, the v-fonts site is really pretty fun and that's gonna show you where to get them as well. So all those things are really nice to be able to see and figure out where you can find more. Some of them are for sale, some of them are commercial.

[00:12:31]
So this is Danbar, I use this as a text phase in my presentation. This is what I meant about playing around with the x height. You can go from really art deco to really super modern, or somewhere in the middle.
>> Jason Pamental: So those are some of the main ones.

[00:12:54]
Interesting of note, San Francisco was really sorta-kinda one of the first true variable fonts. It wasn't exposed to the end user, but that's actually been very similar to what's been under the hood since that was introduced into the operating system. That's essentially how they built it, and that's why a lot of that sort of fed into the eventual technology that drove the evolution of the standard.