So, yes, I'm gonna talk on kind of build on some of our themes that have been emerging today a little bit about how we go about participating.

So this is either a really designed, focused technical talk or a very technical design talk.

Choose your own adventure here.

That's just fine.

So I do spend a lot of time playing around with variable fonts.

I have since day since they launched.

And one of the recurring themes for me is this notion of participation meeting people from different browser vendors.

Different, huh?

Different fund companies and trying things, experimenting and providing feedback.

And so, for me, as a designer on a developer has worked on the Web for actually 25 years, my Web curry is probably older than half the people here.

But that that has led me to be able to participate more than I ever have before just by speaking up just by going in, commenting on issues and trying things out, providing some use cases.

And I'll show you some of those things today.

Really, most people just know me as a walker of these two.

Um, so they're going to come back and help me kind of explain a couple things, but so I spent most of my time working on type and typography and design systems and for browser vendors and that sort of thing, writing content about it, trying to educate people about it.

But I've had people in Australia asked me first how Tristan's doing.

So that's Tristen on the left, and it's his cousin Tilly on the right, and they'll be back to explain some things later on.

So the reason why I think this stuff is so important there's there's lots of reasons for performance and everything else.

But type is the voice of our words.

It's how we hear what we read.

And so all of the tech stuff fixing performance problems with font loading, that's the gateway toe actually get in and do better typography in the first place.

And this is one of the reasons why.

So when this quote came across, I was like the day before I was giving this the first version of this talk for the first time, and and I had to work this in because I think Nina's notion of friction in design, what creates that interface between what I put on screen and what you read.

That's what makes it memorable.

And sometimes you want more friction.

Sometimes you want less.

But type is the way we can modulate that.

I think that's really fascinating.

So what I want to look at is actually combining several different CSS techniques to create more interesting and fluid typography.

And then we can also tie in some other emerging features that will help make that typography more interesting and more useful in more scenarios to more people.

So there's three things that we're gonna talk about primarily, and that is CSS custom properties or variables thehe bility to do calculations with them and pairing that with variable funds.

So variable fonts.

I hope it's something that you've all at least heard about.

But if not, I'm gonna explain a little bit more about what they are in a minute.

So looking at what we have unscreened, I thought the Odyssey might be a good way to talk about the way our journey on the Web has evolved, and I wanted to try and present it in a slightly different way.

So we have a heading, and instead of assigning it an explicit color.

We could sign it a variable for that color, so we might change it later on.

And I think that we'll have some interesting use cases for that.

So this is totally not showing things properly.

Sorry.

Okay, that's what it's supposed to look like.

So we have the color assigned and we want to start to change those things.

So we change that variable assignment.

And so now we have a different color heading.

We might also want to do a calculation on the size so that we could then change that base sides later on as we start to scale it on different screen sizes.

So we've now done things like changed the size, and that actually altered the flow of the text a little bit.

So we might want to.

Actually, a sign of variable to the wait is well, so as size changes, we might impact that.

So here's where the variable fonts come in.

We have that single asset that we can then use in a greater variety of ways, and this is actually where I want to pause for just a second and bring up the idea about when we read advice about things we do on the Web.

We need to think about why that advice exists in the first place.

So I see a lot of people writing about what is good typography and a lot of people will talk about.

These are our experienced designers.

We'll talk about good typography being on Lee, using two weights of a font that's actually not good typography at all.

That's convenient for performance, and that has been sort of codified as away.

We should do things because of the reality of how we serve things on the Web, so it makes for better user experience.

If you get content on screen and you're only loading two assets, that's a smaller amount of data, so that makes sense.

But that's not actually good Typography.

A single weight of a typeface, as you change it in size, will become more or less clear and easy to read.

If you can modulate that, wait a little bit at every different size, you'll get clearer and more legible type.

So there's reasons why we might want to do this sort of thing.

And I also wanted to show that some of these ideas work equally well in the context of a design system.

So it's not something that is purely for one block long form copy.

But when we take this thing and we've got our card, so I don't have a box around it.

But, you know, cards are a theme.

We know we were going to sub grid on them and everything, and we have them here in the bottom part of the layout.

But if we stick them over on the side, maybe we scoped the change in size or scale of that typography to where it's placed in the layout.

So again, we don't have to write any new mark up.

All we have to do is tweak some of those size variables, and that could be dependent upon where things are placed, and that's really kind of interesting.

But let me come back to variable funds because one of the things that I've learned is every time I think I've been rattling on about them enough.

I'll go to another event and people don't actually know what they really look like.

So when you load fonts, you typically have a whole bunch of different files that you need to load in order to get all the different weights and variants, whether it's with weight, metallics, all that sort of thing.

But variable font actually brings all of that together in a single file.

So now you're loading one asset, which is bigger than a single static file.

But not so big is what you want to combine, and it gives you then access to the whole range of that set of weights or wits all at once, rather than having only one or two.

So Tristin, until he again, will help me out where we have variable sized collies and you can have that single fought file that you're loading and then playing around with all of these different characteristics.

And I hope you'll pay attention to some of the classes that have been applied here to make sure that we're really focused in on exactly what we're talking about.

These axes are ones that are chosen to be exposed by the type designer.

They're not distortions introduced by the browser there only what is native inside the font itself, so you'll see a lot of different variable axes exposed, and we're still kind of learning what some of those axes might be, but the more common ones that will be useful to us for you.

I particularly will be things like width and weight.

It just creates a lot more opportunity.

But we also don't want to forget that we also have slipped.

Now we have all of these things available to us.

But one of the things that is often overlooked in a responsive design is how that typographic scale needs to move and change based on screen size.

So we have a small screen.

You have less distraction in less space for that content to show up.

So you don't really want to have the same scale between heading and body copy on a big screen and a small one.

So when you have an H one that's still appropriately sized, you understand that that's the title.

It's the most important piece of information on the screen.

We're going to start to scale this, using all of these things together.

We're going to set a bunch variables for break points and minimum and maximum sizes for in this case, the paragraph, size and line height.

And so these are the things that we're going to move around and scale based on that screen size, rather than using explicit break points to change things all the way along.

We're going to start to do this a little bit differently.

We're gonna use some of these calculations.

So as it changed, what happened, there was the font size and the line height started to change with it.

And so as the screen got bigger, we started to use stuff like this.

And I know that's a lot of somebody who's Greg from the Edge Edge team last night said, Are you gonna put that really stupidly long formula up on the screen that I said Yes, yes, I am multiple times, but I'll explain it.

So this is kind of what's going on.

And this is based on a technique that Tim Brown wrote about a while ago called CSS Locks.

Now some of you have probably played around a view port with units to size text, and that's really interesting, and it helps to size text based on the sides of the window.

But it has a couple of problems in Estelle.

While was the first person that pointed out to me that when you use purely view port units to size text.

You can't zoom it.

So you've created this huge accessibility problem because it's based on the window, not paged him.

So when you calculate it on, introduce another unit of measure.

The end result can still be zoomed, so that alleviates the accessibility issue.

But you also want to stop it from getting too small or too big.

So this is where the locks idea comes in.

You can assign a minimum and maximum size and then tie it to different break points so that it will get no smaller when it's on a very small screen and no bigger when it's on a very large screen, and it gives you a little bit more control without having to worry about everything in the middle so effectively you're still using break points, but only at the low end in high end of where you want it to start and stop scaling.

And so this is what it looks like in story form.

So please take this item and scale it from this size up to this size, starting at this screen size and ending at that one.

So we start to replace these values in the formula gets a little bit simpler, and this is about the point where I throw my hands up and walk away because browsers or better enough than I am.

I didn't really take any college math, either, so that Z this is as far as I go.

But browsers a really good at it, and that's fine, and you don't ever have to rewrite it.

So he used that exact same formula.

I've taken that around from dozens of different demonstrations and workshops.

It's in production in several different Web sites, a couple of which I'll show you later on, and we're then going to see how that actually looks in the real world.

So we take all these things and put them together.

And instead of having on Lee a couple of things happening, we're actually going to tailor a whole bunch of things here.

The width of the text, the weight of it, the size, the line height, all of those things.

They're gonna scale nicely as we go from small screen, too large.

Now, why might we want to do that on small screens?

We have fairly choppy line lengths when you have the text size set at a good readable 100% size.

So rather than make the body text smaller, we could make it a tiny bit narrower if you have a with axis and that will fit more characters per line and give you a little bit more, even reading experience without really sacrificing the ledge ability.

So we're doing a whole bunch of other stuff.

We're setting variables not only for the size and line height, but we're also setting it for wit, and we're doing the same kind of thing as we scale.

You'll notice that not only what's gonna change here is the with the weight as well as the line heightened the size as the scales.

So it's appropriate for the device size.

It gives you a good, clear reading experience optimized for the size of the screen upon which it's viewed.

And that's really important because content is, well, whole point of what we're putting on screen.

Unless it's a game or the kittens, the kittens should just be a 100% right.

Well, dogs, not cats, anyway.

So here's another example of this in action.

So this is a page that I designed for monotypes introduction of the FF meta is their first variable front lunch.

And so this is Justin in bed.

That's a really real Web page.

All the stuff that you're seeing here are actual production fonts or, most never production.

Some of them are open source, but everything that's on the screen here is from one file.

So a single font File 84 k replaces 18 separate files to print.

Create this beautiful range of typography.

Now I say Beautiful range.

I'm not saying beautiful typography.

I happen to like it, but I don't want to imply that that judgment is absolute.

And so that also moves in scales really nicely.

So this is using a lot of the same ideas on the slightly earlier it oration.

But what doesn't have the wit?

But it does create an interesting layout and solution based appropriately for the screen size that it's on.

This is another quote from Tim Brown, because I think this is really important, and this is a theme that I've seen emerging at a bunch of events in different talks this year, where we need to remember that we're not dictating the experience to the user.

We're giving them an experience which they can then choose to take or not, and they can override it with user preference.

They can override it with Paige Zoom and increasingly want to be mindful that we should give them the ability to find tune that experience based on their needs.

It might be ambient light.

It might be low vision.

It could be different kinds of cognitive issues that made that they may face.