Name: Variable Fonts and the Flexible Nature of Screens and Devices by Mandy Michael | JSConf.Asia 2019
Uploaded: 2020-03-28T19:00:03.000Z
Duration: 30 min 23 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Adverbs of degree

I do have a loud voice, so it probably doesn't really matter if I have a microphone or not.

That was a really great introduction, so I could just skip all the stuff about May.

Um, this is last year I attended jazz come for ages.

So it's really cool to actually be standing on stage.

Um, But what I'm gonna do is jump right in and tell you about the talk today.

Ah, we're gonna do a quick explanation of what they are for everyone that doesn't know I will.

Very, very briefly touched on performance on.

And then we'll just look at some ways that you can implement them to do some practical things, but, uh, my favorite demos are the ones that are a bit fun.

Uh, So what's important to know is that I'm a developer.

That looks really terrible, but oh, well, hopefully Oh, wow.

Okay, well, I guess we'll just have to live with that.

Um, So I started reading text effects like a couple of years ago.

And, ah, during my experiments, I started playing with variable fonts, and it became really clear to me very quickly that they offer a lot of unique opportunities that standard funds just can't provide us.

Uh, so the reason for that is that variable fonts, basically one front file that acts like multiple fonts, and that's basically the crux of what they are on.

What that means is that where we might have normally had maybe six different font styles as separate individual files, you can now have all of that information in the one file.

The way this is achieved all comes down to the way that the font itself is created.

So a variable front can have one or more axes on.

What they do is provide different variations between different extremes.

So in this case, we have a lot to a bold white.

Now, along that access, you can have named instances like regular and bold, which is things that we're used to seeing in accord on the Web.

But you also gain the ability to interpret late between those values, and this allows for intermediate designs, providing much finer control over the front itself.

So along with Doris standard values, you can have everything in between as well, like auditory 307 on.

And because the accesses interpolated, it means that we can animate between the values, creating really smooth transitions between the variations.

But we're not just limited to a single access at a time.

A variable front can contain thousands of axes, and what you get out of this is the Inter appellation isn't just applied to one access at a time.

It's applied to the combinations of those axes as well.

So if you wanted to have a wide heavy fund or a really now very thin fun, you can have that all within the one file.

So, in essence, a variable fund gives us a single file with a greater amount of variation on a significant increase in style choices on they don't just have to be standard things like front, white or wit.

It could be something totally different or a little bit weird.

Um, like Decker of all this is probably my favorite fun.

It's the 1st 1 that I have applied with, and it has a lot of different creative axes in it that you can do all something's way.

Then we'll have a look at some demos later.

Now, the way that we use variable funds is really similar to how we would normally use fronts on the Web.

For the most part, we set it up exactly the same way as we normally would announce CSS using front face.

The main difference is how we define variations for descriptors like front way frontstretch and font style.

So in this example, we might have previously set a front face block for the light version.

And then we do another one for the bold vision and so on until we hit all of our styles.

But with variable funds, you don't need to do that.

You can simply define arrange for the front wait.

So in this case, I'm going to 100 to 700.

And then from here, when we referenced in a CSS, we do it exactly the same way that we normally would.

But instead of being limited to values like bold or 700.

You can pick any number between 207 100 like 650 now.

This is really, really good for something like white because we've already got a CSS property that we can use in the land off variable fonts.

This is known as a registered axis, and all that means is that it's being standardized in the speck.

At the moment, there are five registered axes, white with slant italics and optical size, and they're all match to pre existing CSS properties.

But if you want to use something more custom, like the decker of our examples, we're going to need a new CSS property, and that's cold front variation settings.

Now, this is an example of a front that I have invented called my jelly font.

Jell O is the name of my dog he does feature in this presentation, so look out is very cute.

Um, in fun creation settings, you can define as many registered or custom axes as you want, so he I have true custom axes.

One is called Jell O, and one is called fellow and they both have an associate ID number Value.

Custom access codes are defined by the front creator inside the font, and there are always four characters.

Where is a registered access that's defined in the specs Now?

As I said, you can use registered axes in front creation settings.

However, it is strongly recommended that you use the map CSS property instead.

Wait, and the reason for this is it's not really.

This is kind of like a back up if the access doesn't exist because there's a lot of custom stuff.

But to be honest, it's way easier to manage your typography if you use the map properties when you can.

Anyway, I'm sure people wondering about rather support it's actually really, really good.

I'II doesn't support it, but that's not unexpected.

Support is you do need more modern operating systems.

Some of the browsers rely on the operating system versions in order to for it to render.

If you are worried about bras and support and you have to support I, still, which a lot of us dough you can use the CSS feature detection to detect for support off front variation settings.

And then you can fall back to, ah, a standard fund if terrible fronts are not supported.

So there are options there for us if we need to support it in browsers that don't currently support bearable funds.

But to be honest, it's pretty good, and you probably going to get away with that.

So, as I said earlier, I did want to briefly talk about performance because it's a question people often ask.

There's a whole lot of stuff around Web phone performance that can impact this.

I'm not gonna go into it cause that's like 40 minutes of a talk on its own, but essentially everything that you apply to a Web.

Funds on the Web now also apply to variable fonts, but there are a couple of things that I wanted to specifically mention because I get asked about it a lot.

The 1st 1 is the number of front requests, and the 2nd 1 is fun, false eyes so often, when we think about reducing the number of front request to improve prove outfront performance, it means that we would plan out typography choices, and we'd weigh up the cost of design over the cost of performance.

And this is why we have that rule where you can only have, like, three fonts in your website.

That's a employs limitation because of things like performance.

But because variable fronts can contain all that information in one file, that means we've immediately reduced the number of front request simply by using a variable font.

However, if all of that information now existing one file instead of three, what's that gonna do to file size?

You'd be right in assuming that a variable phone is going to be larger than a standard fun.

Typically not always, but typically so I want to give you a bit of a comparison.

I'm gonna use Source Ends pro, which is on get Hub.

The single weight off source ends pro is approximately 234 kilobytes.

Subtitles ListPlay Video

Variable Fonts and the Flexible Nature of Screens and Devices by Mandy Michael | JSConf.Asia 2019

stuff

opportunity

access

basically