Variables for Typography

[00:00:00]
>> And so this is one of the places where this all ties together in a really interesting way. I've got this idea of three different fonts that I might use. Right now, they are all just text objects, right? What I can do is let's gotta move this file, move to project, I'm gonna move this into a paid account.

[00:00:27]
So this is a follow along and watch lets you have a paid account and you can do this too. But I'm gonna need some modes for this. So what I'm gonna do is I'm gonna make a component set that's gonna create three variants of the same component, right?

[00:00:43]
Cool, so I've got that, we'll call it like hero text, right? Cuz it's not really the content that matters, cuz in a component I can always change the content, it's this typeface font size that we care about. Now, one thing you'll notice is that If I go back a second I named this one size equal mobile size equals tablet size equals desktop.

[00:01:09]
Turns out that when you do that, and you create a component set the variance, there'll be a property called size and values of mobile desktop and tablet, right? And so could you changed the properties that you saw me do earlier the button? Absolutely, could you also just name these things and get it for free?

[00:01:26]
You can do that too. So we'll call this hero text. And we've got that and so now, if I go to my assets, somewhere, what's this file called, the problem is this is meant for a tutorial, not necessarily. Variables, modes, I've got this hero text. And that's cool, I can drag one of these in, and I can go ahead, I can switch it between the two.

[00:01:53]
And that's not bad, that's fun. That's still helpful for a designer putting together all these modes. Like I said, this is one of those things where it helps designers and by helps designers, it helps us, right? Because it means that there's now consistent typography across the different sizes, I decided it's bigger in this one cuz it's never consistent then.

[00:02:14]
So, we'll go in here and I'm gonna create a new collection, cuz your modes are bound to a particular collection, so light and dark mode, you might take our color collection. This point, we're actually gonna use something around sizes. So I'm gonna make a new, create a collection, and we'll call it, Break points, and let's create two variables.

[00:02:43]
We're gonna make one that's a number and we're call it min width. And we're gonna say that create three modes in this case. And we're gonna say that mode number one is mobile, which is anything. Mode number two, I'm trying to remember the break point was I think it's either 640 or 768 768.

[00:03:19]
And tablet, thinking two things at once and desktop, right? And so this will be 768, and this will be, I don't know, we're gonna say 1024 for desktop, I feel like I can look at my own code but like let's not. And here's where it gets interesting, we're gonna create another variable and this one's gonna be a string variable.

[00:03:45]
All right, and we're gonna say, Viewport and this one is going to be there kind of have the same names as a mode because because more importantly than the name of the mode. It's actually about the name of the variance that we had. So we made that text in three variants, mobile, tablet, and desktop.

[00:04:08]
So we'll call this one mobile. Tablet, desktop, awesome. And so, now we're gonna do is gonna make a container, here it is. And we're going to say that it's an auto layout cuz that lets us use admin width, right? And at this point what we'll do is hit Apply variable, that one's hidden in a dropdown, I don't make the rules around here.

[00:04:42]
We'll say it's been with, at that point it will become zero, you could make it 350 if you don't want it to get that much smaller, we could do that as well. And then, what we're gonna do is we're gonna drag this component in. We don't want that to hug, this is my problem with this zero man with.

[00:05:06]
And so we can see that we can go in here and we say this layer now is going to be mobile, right? And for this variant, except to desktop, we're actually going to say, hey be viewport, which is the string mobile. So now in terms of size instead of picking mobile, tablet or desktop, right?

[00:05:32]
We are going to use a variable that changes based on what mode it's in, it's either mobile, tablet or desktop. So if I make this, Teensy tiny, right? We changed this frame to tablet, the font gets bigger. We change it to desktop, the font gets bigger. So now you can also have fully responsive text sizes, right?

[00:06:01]
And the designers can then have like, you can even like the example I have up here if we were following along, I actually set a min and a max. So like the max gets to right up to where have mobile guests arrive to where tablet is, the max of tablet gets the write up or desktop is.

[00:06:13]
And desktop goes to like whatever the largest viewport we support is, right? And now you can instead of having to, like tweak the fonts cuz like, prior to kind of coming across US, the design team they would sit there and manually change all the typography. Across five different viewports which even then the best of intentions leads you me [LAUGH] right, with a mess to clean up.

[00:06:35]
Because nobody does it perfectly that much text, of course that many viewports right? But you can now like and because texting kimonos is changeable, right? Now, they'll switch between these different typography keys. And they can now take those responsive auto layout components that we made earlier, use those across all the designs.

[00:06:54]
But that is still one consistent component for us to implement, which means that consistent, the typography can now stay consistent. We can have light and dark mode and the ability to like export a lot of these variables gives us like this amazing ability to kind of like, then have a very consistent designs.

[00:07:10]
That we can then export out into the tokens that we use in our design system, making our jobs a lot easier, right? Which is the kind of the value prop here, which is how do we help designers help us, right? And part of that is knowing how to use the tools that they're using that we're on the receiving end of, and like some of these patterns and strategies begins to kind of make their lives easier.

[00:07:31]
But more importantly, makes my life easier, which I really like, I like my life being easy.