Excellent.

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

But anyway, this is probably better.

Uh, sorry.

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.

It's time.

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

I'm gonna talk about variable funds.

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.

So there's quite a few Nice.

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

I love to design.

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

It looks so pixelated.

That story sad.

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.

Instead, that looks not too bad.

So that's good.

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.

That includes decimal places.

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 by a design, a cold David Beller.

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.

So I like front.

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.

They're not developing that anymore.

So you know it's fair.

Um, the oniy cavey it to these brothers.

Support is you do need more modern operating systems.

So on Mac, I believe it's High Sierra.

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.

I'm using them from moist use cases.

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?

So that brings me to file sizes.

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.

It varies a little bit depending on the star, but it's about that in the O.

T.

F file version.

Now, if we use a more efficient front, wait for Matt like wolf to that will drop down to about 111 kilowatts.

That still seems like a lot.

But keep in mind that source hands have, like lots of language, characters and stuff in it, so you can sub set this to make them even smaller.

I'm pretty sure when I subsidies to like English characters, it came down to six days, so that is always an option.

Now the variable fund, the I T.

F, is very large.

It's 405 kilobytes, but the wolf to is only 112 which is only one kilobyte more than a single weight.

And I get a lot more options with that.

So to me, in this case, if you're using efficient fun, um, formats, you get a lot more design opportunity with very minimal impact to performance.

But as I alluded to it, this is obviously going to depend on a phone by phone by Isis.

It's not always going to be better to use a variable fun.

It's not always going to be better to use a standard phone, so you do need toe, do your research and check this stuff out beforehand.

If anyone wants to talk about terrible phone performance, come see me afterwards.

Have done a presentation on it before so we can have beautiful in depth discussions about it.

Sorry, we talked about rather support.

We kind of know what they are.

Hopefully talk a little bit about performance and how we can use them in our CSS roll across that with that in mind, now we can start to shift our focus.

We no longer need to really tradeoff design for performance.

In my opinion, variable funds are really great way to move past that and we gain much more flexibility in our design opportunities designs which would have previously been a really heavy burden on performance or impossible because of technical limitations like the fun weights or whatever not existing they're now completely possible on.

We can start to forget about a lot of the perceived limitations and figure out how we can use this technology to create better or more interesting experiences.

For I use is on the tourney and the intent of our words can be more effectively represented.

We less worry over the impacts of lighting in too many phone whites and more importantly, and this kind of goes towards the the first presentation is that we can start to embrace the learnings and the growth of print design.

I am gonna adhere.

The reason I'm not a designer is because of stuff like this.

Um, it's really ugly, but it's so cute.

So I've left it in.

That's my dog's instagram, too, by the way, should follow him.

He's very cute, but unlike print design, right, we can benefit from the flexibility and the interactive nature of the Web.

Because variable fonts can have an interpolated range of values.

We can create animations or transitions with the text itself without relying on things like SPG or canvas or, you know, complex Java script stuff.

And we can achieve these effects using techniques we might already be familiar with, like CSS animations, transitions or JavaScript.

Events like report resize grow position, sends a P eyes, that kind of stuff.

So what we gonna do now is gonna look at how we can animate and interact with variable funds to create things that practical to use but also a little bit fun, and we gonna stop with that grass effect that I just showed you.

So the grass or grow effect I use is a font Co decorate bar, which I showed you earlier.

I'm gonna use two of its axes.

One is cold in line and one is cold.

Skeleton worm.

So this is what in line looks like on its own.

It's kind of like a hitch.

Pretty nice.

Put my clicker down.

I should have done that.

Yep.

And this one is skeleton worms.

So at its maximum value off 1000 it's like little noble things.

Now when you combine these together, that's how we get the leaves from the effect.

So once we've set up that base CSS with the front family and out two axes, we can create our animation.

Now I'm just gonna use a key frame animation.

It's got starts at zero.

We set boys in line and Skeleton worm to their maximum values of 1000 at 50% we set skeleton, went back to zero, and then it's just gonna loop background on what this will do is we'll start expanded, you know, disappear and then we'll come back out again.

We add the animation to our hate one.

It runs infinitely.

It's called Grow Four Seconds and that's it.

That's how I made that, uh, all I did was add a little bit of extra CSS for texture.

It's a couple of tech shadows and a background image.

For the most part, the heavy lifting is done by the font.

I'm a bit of a lazy developer.

The least I can write the better.

And variable fonts make this stuff sorry.

Easy, because they've already done all of the work for you in the front itself.

So we just a little bit of CSS.

You could make all sorts of things you can do.

Writing texts.

This is a front buy underwear, this one's decorate bar again.

This uses blend boards.

This is a simple one, using a hover state with transition changing wth e white as you hover over it.

Code gingham.

I don't really know how to describe this one, Um, but it's cool.

This is my favorite Demery, and the reason that I love these Demory to decorate bargain decker fires like the best font David Bello is the best.

What I love about this is that if you have a look at it, it's got a really long text Shadow applied to it, but what it demonstrates is that As you modify the variable fund, the techs shadow disappears with it because we're actually changing the front itself.