Placeholder Image

字幕列表 影片播放

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

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

  • Uh, it's very, very beautiful.

  • on.

  • I just like to look at it for a long time.

  • When I first made it, Crime did not like it at all.

  • Originally, it would make my laptop get very warm.

  • Um, but they have fixed the performance of it now, so it doesn't get as hot anymore, Which is nice.

  • Um, as hot.

  • I said, Yeah, it's a little bit eso this Demory.

  • This is marshmallow in my dragon.

  • Away from that mine.

  • Um, So when I started making text effects, I eventually got bored of the fact that they were just there.

  • So I started experimenting with alternate imports.

  • If this doesn't work, I have a back up off a button.

  • But that's boring.

  • So I'm going to say a word to marshmallow, and he is going to breathe fire in that wet using my awesome variable phone.

  • Bye.

  • Hey, this uses Decker bar again.

  • It's like a bunch of axes on.

  • What I love about this Demory in particular is that I always wanted to create via text, but I could never get it to look like fire.

  • So instead, what I did is I made the rest of it looked like the fire text I could make, um, but I like how it kind of the text itself becomes part off the illustration and the interactivity on.

  • Although you can do this with Canvas and SPJ, we've never really been able to tie out actual content into designs.

  • It's always kind of added on as a fate is like a layoff, and it doesn't blend as well into the background.

  • But with variable funds, you can start to tie those things together.

  • Ah, lot more effectively.

  • Thank you, Marshmallow.

  • That was spectacular.

  • So it's not just that these are beautiful local effects, right?

  • What they demonstrate is that as developers and designers, we can control the front itself.

  • And that means that variable funds allow typography on the Web to adapt to the flexible nature of our screens, our environments and our devices.

  • This means we can also make the most of things like dark mode, for example, to change the way, um, Alfonso represented in different colors, games or environments.

  • So, for example, we could change the access of one of our fronts in profess call escape, maybe a query, and that could give us something like this.

  • It bruises because it's Doc Martin right?

  • I made this Halloween and thought it was hilarious.

  • I still think it's hilarious, So this is a bit of a silly example.

  • But more practically, we can modify the contrast on the styles of that text to ensure better eligibility.

  • When we think about, um, color contrast and doc voids and things like that, we usually thinking specifically about color, and that's obviously important.

  • But the colors that we use can affect the way out.

  • Text is red and how legible it is.

  • So you might actually need to change the weight a little bit.

  • Or the wit a little bit, well, optical sizing to make it more legible in a docket interface.

  • But also, if you think about this from a user preference perspective, if a variable fund is available to developers and designers, it also means it's available to you.

  • So for those people that need to make custom style shades for accessibility reasons, it means that they can customize the way the funds surrendered to suit their specific needs.

  • And that's very exciting to me.

  • I like the idea that we can give our users options for their own preferences, and I know there's a variable fun being developed at the moment.

  • Uh, that helps people with dyslexia to change the way that, um, let how far letters are apart, the shapes of them so that they can read content better.

  • And this is very important critical interfaces or public websites like governments, hospitals for these kinds of things.

  • So rather than designing for, I guess the average you can give people the opportunity to customize it to their needs.

  • But also it means that we can change our design onda typography, to adjust the things like screen with that might allow us to tweak front way with optical size or other axes to be more readable on larger or smaller screens.

  • So where the view port is wide, we might have more detail, or when the report is smaller, you might want it to be heavy us.

  • So it's easier to raid.

  • Or, I mean, if you want things to fit in a confined space like a box, um, you might be able to do that, too.

  • I'm sure you can think of some good examples of where that might be applicable.

  • Another example is when you have designs which are designed to fit a certain breakpoint.

  • In this case, I'm reducing the wits of the heading.

  • As of you pull get smaller so it doesn't wrap onto a new line.

  • This means I can maintain the integrity of my design.

  • And I can determine when the Texas going to rap or stack on new lines.

  • Now, I did this with a bit of Java script, and I want to show you how it works because once you have it, you can do a lot of cool things.

  • So we need a couple of things, the access range.

  • So in this case, 200 to 900 front wait on the event range.

  • So report for this 3 22 14 40 we get our current view, but with window don't Inuit or something, then we need to convert that to a decimal.

  • So we take the current size we minus the minimum.

  • We divide that by the maximum minus the minimum size, and that'll give us our decimal.

  • We typed that decimal place.

  • We multiply it by the minimum white, minus the maximum weight, and then we add the maximum white on.

  • They need updated in your CSS.

  • However you want to do it.

  • I'm using CSS custom properties because they're amazing.

  • Whack it all in a function.

  • It looks something like this.

  • Don't worry about the code.

  • I will share my slides later on.

  • There's also it's on on Get Hubbell's well so you can just copy it from there.

  • And court pen.

  • Once you have this, put it in an event Lee snuff for re size in this case.

  • And that's how you make it.

  • Adjust to the report.

  • Now, as I said, you can pass any event or access range into this so you could pass in scroll events.

  • This uses cheap.

  • Bye.

  • Oh, no.

  • Type.

  • Cory took me longer to figure out what would to putting this than it did for me to actually write the code.

  • Um, but blue, I think nailed it.

  • You can tied into device orientation.

  • It's funny that my foreign is cracked in this, but that wasn't intentional.

  • Um, it's actually way worse now, which is a bit embarrassing.

  • Um, well, this one I love this one I made these last year.

  • These changes the phone white Anna, transform of each individual letter.

  • Uh, this one.

  • Sorry.

  • Had this wasn't coming up very nice on this project.

  • A but I'll see what it looks like.

  • Yeah, so, this one, um, I'm not tweet the link house, so you can say it.

  • So it looks better.

  • Um, it's cold.

  • Whoa.

  • By scribble time and it uses, ah, mass position to change the angles and the orientation off the, um the axes.

  • Such a cool fun.

  • Where's my mouth?

  • There it is.

  • So we've also got one like this.

  • This uses the web audio a p i on it listens to the sound of my voice.

  • What I'm gonna do before I explain why this is cool is get all of you to go woo.

  • Uh, okay.

  • So why I think this is cool Aside from the fact that I like people to woo at me when I'm on stage is that if you think about speech to text ap, eyes like or Google harm Alexa those kinds of things when they convert our speech into text, you kind of lose the torrent of the intent of your words.

  • But if we could combine, um, terrible funds with web, auditory and other technologies, we could start to represent what we're saying in much more meaningful ways so we don't lose that tone and intent.

  • So the message is that we send to people free these, um, speech ap eyes and actually convey what we want rather than people may be misinterpreting what was I?

  • But I think that's super cool.

  • I'm just gonna stop that so it doesn't keep running in the background.

  • I'm so this one, I'll just get my prop here, my boy.

  • Confine.

  • Um, this one uses the ambient light cents off.

  • So I just put the light up to my laptop, and this is the same technology that causes you a lot.

  • You're forming to dim in loyal I environments.

  • And what is really cool about this is that if you think about the fact that we don't always sit inside an office with perfect lighting, sometimes people are using tablets and moving indoors toe outdoors.

  • You might want to change the way your text is rendered.

  • Thio be more readable for critical interface is you might want to make sure that it's whatever situation they're in.

  • They can read what you want them to see.

  • So sometimes it might need to be heavier rather than really thin on this.

  • Once called tiny, and I just think it's a good demonstration of the effect so you can make things more usable and more accessible with these kinds of technologies, or because this is may, you can also create a really interesting story telling this one's called blooming G X by type.

  • A chew up author who makes this font makes the most incredible variable funds you ever seen in your life.

  • It actually rent is better on five folks, but the ambient light sensor doesn't work in five, so I couldn't couldn't show you.

  • Um, but there's a lot of opportunity here for creating experiences, which allow users to to experience how Web site based on their specific circumstances in their specific experience.

  • And I think that's really exciting, like we don't have to keep designing things that work a specific way for every person that ever visit our website.

  • We can create something that's just for them in the moment that they're in at the time that they visit outsides.

  • And finally, um, this Arthur made a jelly font so that you can Pat Guillory infront form.

  • This is probably the happiest I've ever been in my entire life.

  • That my dog now has a front.

  • Absolutely delightful.

  • So it's only because variable funds give us control over each of these elements that we confined tune front characteristics to maximize things like eligibility, readability and accessibility of our website text.

  • And I know that some of these examples might seem trivial, but what they are a possibilities with demonstrating the options that you have bearable funds are still very new, and this is a level of control over affronts that are unprecedented.

  • We have never been able to do this with actual text, but maybe this is an exciting place to be in on the Web.

  • We have technology developing all the time.

  • New senses, new I P.

  • I's new CSS New Java script, and we have more opportunities than ever to combine, create and present content on the Web in more creative, more meaningful, more purposeful and do sorry in a more performance, an accessible way.

  • There's no reason that we can't have all of these things on build.

  • Amazing experiences for I use is so with the very laced you could create a more performance website just by using a variable fun That's cool, but also, you know a little bit boring, but at best we can do all of these cool, amazing things and start to create websites that are not just for, um, everyone to feel the same experience, but to give them something that suits their needs in the moment that they in right now.

  • And I think that's really exciting.

  • And that's why I get excited about the future off Web typography with terrible funds If you want parable funds B Dash wants dot com is the best resource.

  • My blood variable fund start.

  • Dev hasn't been updated for a while, but I will be doing that again serene.

  • And these are some great people to follow you on Twitter, Thank you very much.

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

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

使用可變字體的非常靈敏的排版 - Mandy Michael | JSConf Hawaii 2020 (Very Responsive Typography with Variable Fonts - Mandy Michael | JSConf Hawaii 2020)

  • 3 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字