Variable Font Features

[00:00:00]
>> Jason: Before I jump into the next little section on sort of finessing and some of the fine details, I wanted to actually come back to something, Kim and I were just talking about which is what I was getting at and how things are changing over the next six months or so.

[00:00:23]
Currently, the CSS specification is relatively well written for variable funds but nothing is anywhere near fully implemented. So font variation settings is the low level shorthand for messing with all of these and there's, you can, you can access any access of variation you want using that syntax. But that's not really the right way to do it.

[00:00:55]
And we want to set the width using font stretch. We want to set the weight using font weight. We want to set italic and slant using the proper tags. The point being, that a browser that doesn't understand the variable font will still understand what that tag means. We're disrupting the syntax that we're using to write our CSS, the least way possible.

[00:01:19]
And it's just not there yet. So, I'm gonna pull up one of these pages, that little sample page that is in.
>> Jason: Let's see, part 4, VF- samples. So this page is set up to show the different ways that you might access these properties using font weight or font variation settings and each of these should be triggered with a hover.

[00:01:52]
And you'll notice I'm in Chrome right now and I'm hovering over with font weight and nothing's happening. But if I go down to font and variation settings and weight, it does exactly what you think it's supposed to do. And then if we go with font stretch with the number, nothing happens.

[00:02:09]
Font variation settings with width, it does what it's supposed to do. So that's in Chrome and if I take the same thing and go over Safari,
>> Jason: You'll notice font weight is working. It's fully implemented there in addition to font variation settings. So, these are some of the pitfalls right now in that font variation settings is implemented fairly evenly across the board but the proper CSS attributes are not evenly implemented and the danger here is that we all fall into using that lower level syntax, rather than the proper CSS attributes.

[00:02:51]
It will work but it starts to break the model. It starts to break down the way we write our CSS. And so, if we're not accessing it with font weight, it's harder for us to then scope it for whether or not the variable font's actually working because we've gotta rewrite a whole lot more CSS.

[00:03:10]
So, this is why I'm trying to let people know that yes, you can do things with font variation settings but over the next few months, things are going to be evolving and changing and we really wanna keep the pressure on the browser vendors themselves, to implement things fully.

[00:03:28]
Because we have a little cautionary tale with font feature settings. Has anybody ever used those before? That's how you would access some of the OpenType features that I talk about. I'll show you some of that CSS looks like and the reason that this is so important is that font feature setting was a similar low levels syntax to turn on and off kerning, turn on and off ligatures.

[00:03:53]
Different figure styles, fractions, all of these other little things that you can access with a good OpenType font. We were supposed to have font variant kerning and a whole bunch of other things that were supposed to be implemented, in order to access turning on and off ligatures and different number styles.

[00:04:14]
The CSS spec is written but because nobody was really making use of them, the browser vendors never prioritized actually fully implementing these things, so it never got done. So it's still kind of hanging out there. There's a lot of unimplemented CSS specs for text and proper typography, that has never been fully implemented.

[00:04:38]
Another one that is kind of a nice one is having a text decoration that you can specify ink skip. Meaning that has the browser, the underline for a link is drawn, that it skips the descenders and doesn't draw a line through it. If you look at a link in Safari or on IOS, you'll notice that it's a nice delicate underline that skips the descenders, it has little break around it.

[00:05:06]
It looks really refined and you'll look at it in any other browser, it's just this big heavy line that's drawn underneath it. So we're supposed to have the ability to specify that ink skip and also, eventually, the weight of the line. So it would be really nice to be able to have a little bit more control over the way links are defined.

[00:05:26]
And that's just another example. So, I try and stress this, so that as we start working with this and everybody has access to those links on GitHub, that people can weigh in and they can find those pages to vote for these features. It took a long time to get hyphenation in Chrome.

[00:05:44]
But it was because hundreds of people went and weighed in on this issue on GitHub in the bug tracker for the Chrome Dev team to say hey, we really need this because they got halfway there. It was another thing that kinda people lost interest or lost momentum where they implemented hyphenation but no hyphenation dictionary.

[00:06:05]
So it just didn't work. And hyphenation is a really important tool. Especially on narrower screens in order to have a somewhat better line wrap. So, it's important to note, these things are here, they're suppose to work, either with font variation settings or with font stretch. You can see font stretch is not doing what it's supposed to be doing, here in this browser.

[00:06:30]
But it's using it with font variation settings. So, some things are implemented, some things are not. You can see slant is working great. It sort of works here but you can't animate it. So that was kind of an interesting difference. And so, we can get the oblique 20 degrees but we can't animate it smoothly.

[00:06:53]
We need font variation settings to do that.
>> Jason: That's how x are doing what they're supposed to be doing. Optical sizing is working pretty well. So, this font sample page, so VF samples in part four, just has them all individually and you can look at the corresponding CSS, so that you can get a better sense of how each of these things would be implemented specifically.

[00:07:21]
So if we go and take a look at that file.
>> Jason: So, I try to sort of specify each one with a sort of readable class name. So demo wait. There's all your font variation settings and when it's on hover, it changes the values. So, you can get a sense now.

[00:07:52]
This is with that has a whole lot of things that you can change. I'm only changing a few but you can also see how each of them behaves specifically and if we scroll down there is grade, so you can see how that can things up without reflowing and the ascenders and the descenders is kind of fun and of course this one

[00:08:22]
>> Jason: So these are basically all of the little demos that were in the slides. All the code is here, so you can play with any one of these.