Responsive Variable Fonts

[00:00:00]
>> Jason Pamental: Responsive type itself. I'm gonna talk a little bit about variable fonts. So, September 12th, 2016, this was at the A Type Eye Conference, which is the largest, sort of international conference for the type and typography industry. Four companies got up and introduced an evolution to the OpenType specification, OpenType 1.8, font variations.

[00:00:26]
And it was Microsoft, Google, Apple and Adobe, all worked on this together with input from Monotype and many other individuals in the industry. That was an evolution of this OpenType specification that included what I called different registered and costumed axes of variation. And this was a big deal for a couple of reasons, there had been two attempts at creating some form of variable font.

[00:00:55]
Before, multiple masters in the 90s and a similar time frame true type GX where other attempts at creating a single file that can act like many files. Variable fonts is the first one that really worked. And it's also the first one to come about when we have the web on which to use it.

[00:01:15]
And this where I find the most significant benefits. So rather than having all of these separate files, it's all together in a single file. And you get all of these things together. All the different widths, all the different weights. All the different x-heights, if that's what somebody wants to create.

[00:01:36]
There are a whole bunch of different axes that you can play with if the type designer has exposed that and build it into the typeface itself. So it's an important thing to keep in mind. This is not stretching or deforming a font. It’s actually only using what has been deliberately put there by the typeface designer.

[00:01:56]
So it gives you a fairly safe playground in which to play with these values. You can also get slammed.
>> Jason Pamental: Now, the notion of registered axes. This is meant to map things back to concepts that we already know. So there are a small number of registered axes, things like weight.

[00:02:19]
And you'll see, font weight, that's kinda normal, that's something that we're used to. We're used to keywords, but we also have those number values of 100 to 900, that's what's typical in CSS. What this allows us to do is vary the weight numerically and animate it. So it actually gives you everything along that range.

[00:02:43]
And every typeface might have a different set of values. One might go from 100 to 1000. Others might only go from 300 to 700. But whatever the designer wants to expose is gonna work, and width works the same way. So font stretch has never been particularly useful before now, it can actually be mapped to a true variation from compressed or condensed all the way out to extend it in the width of that typeface.

[00:03:13]
>> Jason Pamental: Now, slant is a little bit different than italic. Slant is often referred to as oblique. San Sarif typefaces are more often going to have something like this, where there are no changes in the letter form shapes just the angle. And so by being able to specify that in a number of degrees, we could actually oblique that text a specific amount.

[00:03:37]
It doesn't always have to be all on or all off, and you could also animate the states in between. Italics is a little different. So we have font style oblique and degrees, or font style normal or italic. This is either on or off. But if you pay attention to the lower case a, in particular, when this shifts over to italic, you can see that even the glyph changed itself.

[00:04:00]
So the shape of the a is swapped out for a totally different one. So that actually brings up an important point. These axes don't have to be a continuum. They can either be on or off or have steps in between. Again, however the typeface designer has decided to make this work.

[00:04:22]
>> Jason Pamental: Now optical size is the fifth registered access. It also requires a little bit more understanding. I'll get into this a little bit more later on, but the main thing you want to take away from here is this optical sizing is about appropriate for the size at which it's being displayed.

[00:04:43]
So you'll pay attention when I click a button here, watch the thick and thin in the stroke contrast, as the physical size of the type gets bigger. See how the strokes in the lowercase a and the n, and the connecting points in the d or the crossbar in the H.

[00:05:06]
See how much thicker that is at the smaller size. That's intended to keep it readable at a physically smaller size. So initially, when people were making metal type they would do this so that when you're printing something on a newspaper, the details don't disappear. And because there was finite limitations to the actual technology of printing it, we have a similar consideration with screens for phones.

[00:05:31]
As it's a physically smaller size, you wanna make sure that it's still sharp and crisp and doesn't lose any of those fine details. So optical sizing is really useful there. But the interesting thing about this format is that it's completely extensible. So a typeface designer can create whatever axis they want, and as long as they expose it with that four letter abbreviation, then expose a number range or whatever values they want to allow people to supply, you can do all kinds of other things.

[00:06:02]
So one of the more common ones is grade. And there's a notion in text that increases the contrast between the text and the background without changing the physical space that the text occupies. So if you think about ambient light or people with low vision, being able to increase the grade of the text creates something that's a little bit more readable or stands apart from the background a little bit more.

[00:06:26]
Without doing something really obvious or reflowing. That could also be really useful in UI animation. So if you wanna make something bolder without changing the physical characteristics of all the stuff around it, it makes it really easy. One of the touches that I was showing you earlier as I was resizing one of those pages, were things about ascenders and descenders.

[00:06:51]
Watch what happens with the axes that we have here in Amstelvar. We can control the height and depth of those ascenders and descenders, so when we want to set text closer together, we don't get those collisions between the upper and lowercase letters.
>> Jason Pamental: Now, this is more of a demonstration of how ridiculous you can be.

[00:07:14]
Deck of R is in no way intended to be a production typeface, but it does show you just how extreme some of the variations can be. And while that may not be necessarily readable, it's still regular text, that would still be read by a screen reader, no problem at all.

[00:07:35]
Or you could create an accessibility setting where you might have something that's very decorative, but if somebody has a hard time, that might be able to click a button and then have it actually revert back to something that's a bit more standard. So things like this actually challenge the notion of what typography is in the first place.

[00:07:54]
So it's not just setting text on screen and making things in understandable size hierarchies, it's actually how much do you want to change that experience over time? How much do you want to create that emotional tie that actually can change? There's another typeface, I'll have to look for a link to it.

[00:08:14]
That was shared with me by another foundry where the access that they've created was time, so that you could along the axis and animated, it would draw the letters. That was really interesting and you could either draw them all at once or draw them one after another. So in animating that, actually having a message that kind of draws itself out, but the text is actually all there instantly for a screen reader or for SEO purposes, that's pretty remarkable.

[00:08:43]
So you can create that effect without compromising the things that make the web, the web.
>> Jason Pamental: This is what it looks like inside. So this is sort of the exploded view. So if you see the most defined shape, is the regular dimensions of the character. And the way the font format works, is it stores deltas, or point differences from one extreme to the other.

[00:09:09]
So you can see that those points move up and out for a wider, even heavier stroke, and also thin. So if you kinda look closely at this, there's the very thinnest, narrowest shape as well as the narrowest fattest shape. And all those points are stored inside the font file itself.

[00:09:28]
And the browser can then interpolate between the placement of those points. So that way as you slide the long or with throw away access, you have these points to go by and figure out how to draw that character and maintain the integrity of the shapes themselves. Now it's not without this complication, it is tricky to say at least, it's a lot of work for the type designers but it creates a typeface that can be use in infinitely more ways than anything currently in existence.

[00:09:57]
So instead of there being 18 different weights for something, you really have hundreds. You can explore whatever in-between state that you want. And it allows us to modulate the weight of headings that's appropriate to the size of the text. So instead of only having one heavier weight that we use at 18 pixels, 24 pixels, 36, 48 and it gets sort of increasingly muddy or increasingly spindly as it gets bigger.

[00:10:29]
We could have slightly different weights all along and that way, you'd have greater clarity and greater expressiveness by being able to dial in to exactly what you want to establish that typographic hierarchy.