And what I mean by responsive typography isn't like traditional responsive web design where you move the brother and stuff change.

Um, Maur, about how we can make how typography respond to various inputs.

Different ap.

I sense is that kind of thing.

But first, what older is explainable?

Variable fonts off before I do that.

My name is Mandy.

You can find me on Twitter Mandy on the school code.

If you have any questions, things don't make sense.

My dams are open moist of my demos are upon kore pen at, um Mandy.

Michael.

Sorry.

You can go and check those out.

Light are there in a collection.

He sees my dog jelly.

You will find out why this is important.

Why?

I had to tell you that my dog's name is Gellar.

Because if I didn't, things would get very confusing little.

So I wanted to explain how I fell into, um, playing with variable fonts.

A couple of years ago, I started making text effects.

We've hate Chanel and CSS, and, uh, I came across bearable funds as a result of making text effects and it became clear to me very quickly that terrible funds offer us some unique opportunities that standard funds have never been able to provide us.

And the reason for that is that a variable fund is one front file that acts like multiple funds.

And what I mean by that is it the moment when you're lighting funds into your side, Say you have I don't know.

Six.

Want whites.

You would have these as separate individual files, and you would like them in separately with a variable fund.

All of that information exists within one file on the way that this is accomplished comes down to how the front itself is might.

So a variable fund can contain one or more axes, and each of these axes represents different variations of extremes for a different style.

So, for example, a white access might range from a lightweight toe, a really heavy or black way.

Now you can still have all of the standard stuff in between that you used to like regular bowl that kind of thing, then I'm as named instances.

But you can also inter polite between these values, which means you have access to all of the values in between as well.

This means that we can animate between the styles, which is something that we've not been able to do with funds before.

It would be really junkie because you couldn't get those smooth transitions, but we're not just limited to a single access at a time.

A variable fun can contain thousands of axes, and you can interpret late between the combinations off the axes as well.

So whether it's white or wit standard stuff like that or if it's something a little bit different, this'll one is called Deco bar.

It's by David Fellow.

It's an experimental variable fund.

It's one of my favorites because it has a lot off creative axes that you can play with.

Now I'm going to show you some examples with Decker of our bit later.

But before I do that, I wanted to get the practical implementation stuff out of the way that people always ask, besting, rather support.

You can totally use them now unless you have toe support.

Internet Explorer.

If you do have to support Internet Explorer, you can U.

C s s feature detection to pull back to a standard form.

I'm so you know that there are ways around it.

The only caveat to these green takes is that all Firefox you need to have high Sierra and above on a Mac, for example, because five folks relies on the operating system to render the variable fund crime does not.

So I see here is a couple of operating systems agree, so that should be less of a problem.

But it does require, uh, all modern operating systems to render the specifications when it comes to using variable fonts.

It's the same way that we use funds.

Now we use one place.

The main difference is how we render Sorry, How we define descript is, uh, sorry.

The variations for descript is like front wait frontstretch and font style.

So we the standard fun say you had ah, regular weight and a bold wait.

You would do one front facebook for regular on one front, Facebook for bold.

And you keep doing this into you handle of the styles that you need with a variable funt, you just have to define arrange.

So in this case, 200 to 700 And then when you referenced in your CSS, you can pick any number from 300 to 700 including decimal places.

So 658.756 is a random number, but you can pick anything now.

This is really, really good for something like White because we have a CSS property for it.

This is known as a registered axis, and all that means is it's defined in the specifications.

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

If you wanted to do something custom like Decorate Bar, which I just showed you, we need a new CSS property, and that's cold front variation settings.

Now, fun variation settings will allow us to define as many registered and custom axes is we need.

And the way that you use them is you define a full character string, which, in the case of custom axes, is determined by whoever made the bond.

So in this case, me, which is why it says jelly, Uh, and then you give it a associated number value, and you could just separate these by comma and add as many as you like.

You can use a registered access in fun variation settings.

For something like Wait, it is W G H T.

However, I would recommend that you don't There are some bugs in front creation settings, but the main reason is that it's just harder.

We already know how to use things like fun, wait and fun style.

And if you're doing fancy stuff, fund stretch on optical size so it don't change what you're doing already just to use a different property, keep everything the same.

And then when it's custom, you spawn variation cities for that, so using them is pretty much the same as what we doing now with a you know, a couple of slight changes when it comes to funds on the Web.

There's a whole talking that for performance on its own or a variable fund.

There's a couple of things about them that does make him quite good for performance, but they still fund, so you still need to have a good fun performance strategy, things like front display, sub setting, compression, that kind of stuff.

There's three things that I wanted to mention about variable fund story that, um, good for performance, the kind of unique to the fact that they're variable funds and the 1st 1 is reducing the number of front requests.

So one of the ways that we maintain good fun performance is trying to not request is many funds to download at the moment when we think about reducing the number of front requests, we'd weigh up the cost of design over the cost of performance, and we'd have to justify the cost off adding new fonts before we add any more styles in because of the impact that it would have on the performance of the site, but with a variable fund.

Because all of the donna can exist within one file simply by using a variable funt, you reduce the number of front requests just because that's what it does.

So not only do we reduce the front request, but we also gain the benefit of all of the interpolated values as well, giving us more design opportunity.

Of course, the problem then becomes, if all of the daughter is in one file, what does that do to file size people like?

It must be huge, right?

My answer to this is not necessarily, um, in my experience, that's my terms and conditions.

Variable funds are either on par or better than the combination off your standard front waits, for example, that you might be loading in your sight just generally on an example of this is source and spray.

So this is the file.

Size is for the walk two virgins.

A single white obsolescence price is 111 kilobytes.

The variable fund is 112.

The variable front has that single way possible that other waits plus all of the interplay values.

So for an extra kilobyte, you get like a significant improvement in design opportunities now.

So Sanchez, a big fund.

It has lots of language support, so I would subset this on.

DSanders wants do subset a little bit better than variable wants, although not significantly.

But even if you had True, White's a regular at a ball, which is pretty common.

The variable fund is still smaller than the truth standard weights combined, so you can get some good performance benefits by switching to a variable front.

But this is obviously going to depend on the fronts.

You use your website styles that using so like don't quote me on this and come back to me later and be like Mandy.

You said that my performance would be better if I used variable fun.

I can't tell you that in every scenario, but there's an opportunity of it might be better.

So at this point, what I want Thio to get into is the fund pot is a bit that I like in my talk with Tunnel of the sort of serious housekeeping.

Um, if performance can be better even, let's diss assume our performance doesn't change.

But all of a sudden we have a lot more options for our styles in Alphonse wants more flexible choices.

This means that we can start to shift out fragrance.

We can experiment with creating better experiences.

Will the people using our Web sites and creativity can determine our choices?

We don't have to start to trade off design for performance.

We can have both.

This is something we don't often get right.

Always like Oh no, you can't have an accessible web site and a beautiful website or you can't have a performance website in a beautiful website.

I'm telling you that you can variable funds who allowed you to do that?

But also just generally you can like if someone told you that they're wrong, Um, for example, this uses 13 different front lights, many of which don't exist in the standard fund.

So you can see that we kind of sought to gain some more flexibility designs, which would have previously being a very heavy burden on performance and now completely possible.

This means that the turn, the intent, the rhythm, the meaning of our words can be changed.

And they could be represented more effectively with less worry over the impact of lighting into many fund waits.

This is what I refer to as Gellar.

It's, um and I use it quite extensively.

Um, it's pretty much just words that rhyme with Gellar on a blue bit of story about about him.

So you get to let about him as you go.

Speaking of Jell O, um, we can embrace the learnings off print design right when we sought to do is we can combine variable funds with things like Suze has screwed and blend murders and shapes and clip path and section at ours and all of those bright things, and we can represent our content in more interesting and more engaging ways.

But unlike print design, we can embrace the interactivity and the flexibility off the Web.

Because variable funds can have the interpolated range of values we can create animations or transitions on.

We can do that with techniques that were probably already familiar with.

Like this one.

This is a hate want and some CSS.

It's editable selectable, searchable, accessible via a screen reader.

You can copy and paste it, and it only requires a little bit of CSS to make the actual animation work.

Previously, if we were going to do something like this, it would have to be SPG or canvas or something like that.

CSS.

To do that is this.

I have a fun family.

Definite Ball By David Bailey.

David did.

He's amazing.

He deserves all the credit in the world for this foursome Fun.

We have an animation property runs infinitely key frame.

I've just called it grow.

It's got two states.

We have three axes for this effect.

A wet ones code in line on one's called Skeleton Worm.

David.

Name them.

I don't know.

Um, skeleton.

One starts at zero and then goes to 1000 in the next frame and then it just leaps background.

I'm literally That's it.

Uh, I added a bit of extra CSS for, um, text job bought.

It's a background image in some tech shadows.

The heavy lifting is really done by the CIA.

They've been kind of did all the work for me, and I just had to sweeping and out a bit of CSS and then share out these old demo on Twitter and wait for people to go, which they did, and I was very excited about.

But I think this is really amazing.

Doing this with text is something we've never been able to do before.

And there's lots of stuff that you can do with text on variable fonts with just a little bit of CSS, maybe a bit of Java script.

This is, Ah, handwriting fun by foundry cold underwear who were doing really awesome stuff we've had riding.

You should check him out when I started making text effects.

Originally, I would lay up front a lot.

But the problem with that is that you're loading multiple funds and just to get one effect, but with variable fonts, it's or any one front, and you can lay things to create the effects in a very similar way.

You can do hovers and transitions with your weights or your wits, which, like I said earlier, is something that we weren't able to do before.

Um, I'm not really sure how to describe this.

I just think it's really cool.

It's cold wind, VF, Uh, every time I do this talk, I'm like, I'm gonna figure out a good use for this, and I still I still haven't yet.

You can create weird things like this.

This is actually a Google font from the Vetri version of the Google Funds.

A p I they have variable funds is about a dozen of them.

Um, so you can experiment with them with Google funds as well.

I have a blood called verbal funds, not dead.

That has a tutorial on how to make this so you can go check that out if you wanna have a bite.

Well, you could do something like this.

Um, this is Deputy bar again.

And this is my favorite Demery.

And the reason that I love it is because I love have a tech shutter, disappears with the text.