Name: 可変フォントを使った非常にレスポンシブなタイポグラフィ - マンディ マイケル｜JSConf Hawaii 2020 (Very Responsive Typography with Variable Fonts - Mandy Michael | JSConf Hawaii 2020)
Uploaded: 2021-01-14T10:24:45.000Z
Duration: 28 min 48 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来進行形

um we're gonna be talking about responsive typography with variable fonts.

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.

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.

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.

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 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.

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.

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.

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?

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.

A single white obsolescence price is 111 kilobytes.

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.

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.

字幕リスト動画再生

可変フォントを使った非常にレスポンシブなタイポグラフィ - マンディマイケル｜JSConf Hawaii 2020 (Very Responsive Typography with Variable Fonts - Mandy Michael | JSConf Hawaii 2020)

stuff

specific

content

hilarious

可変フォントを使った非常にレスポンシブなタイポグラフィ - マンディ マイケル｜JSConf Hawaii 2020 (Very Responsive Typography with Variable Fonts - Mandy Michael | JSConf Hawaii 2020)

stuff

specific

content

hilarious

可変フォントを使った非常にレスポンシブなタイポグラフィ - マンディマイケル｜JSConf Hawaii 2020 (Very Responsive Typography with Variable Fonts - Mandy Michael | JSConf Hawaii 2020)