Design Systems with React & Storybook Typescale Exercise
Transcript from the "Typescale Exercise" Lesson
>> So, we're going to go create a type scale. The first thing that I want you to do is, go to Google Fonts. So that's fonts.google.com. And I want you to find a font that you like. It can be sans serif, it could be serif. It could be monospace.
[00:00:13] I'm going to be using a monospace font. And actually, if you copied over that artboard to your typography page here, you can see this is my type scale. I believe I used the perfect fifth as my scale. And I used a monospace font, Roboto Mono. So the first thing is go select a font from Google Fonts.
[00:00:32] If you don't know how to actually save it, all you need to do is, let's pick one, I don't know, I don't think I have this. So you press the plus button here. Okay, it's gonna pop down here. You can hit Download. When you download it, you can open Font Book.
[00:00:48] And then all you need to do is drag this, unzip it, and then drag this file into your Font Book, and now it's locally installed on your computer, okay? So if you want to use a font, just go ahead download it, drag it into Font Book. Once you have that downloaded, it's now on your local machine.
[00:01:07] I mean, we're using Figma, it's in the browser, it's probably a little bit different. I don't know if it's pulling your local fonts or if it's all in their UI, I'm not really sure. But if you're using Sketch, for example, Sketch is a Mac application you would have locally, you would need the fonts downloaded to your computer.
[00:01:23] So choose a font, and then you can use my artboards here as reference. You can actually even just change this font itself. You don't need to create new ones. So you can either copy and paste these artboards and create copies, or you can just change mine, whatever you prefer.
[00:01:37] And then, type scale generate calculator, there is, this is all linked in the website, Type Scale, A Visual Calculator. If you Google for that, you're gonna get this. And you can change over here, and you can find a type scale that you like. So perfect fourth, perfect fifth is really big.
[00:01:55] Golden ratio is even bigger. So find a scale that you like. I chose the perfect fourth, I think. And what you're gonna do here, as you can see, we've got 1M, 1.3M, 1.7M, it's a base 16 pixels, and you're gonna copy that over. So let's say I'm gonna choose a different one, let's say I choose the major third.
[00:02:18] I'm gonna put these windows side by side, so I have a reference here. If you wanna hide these sidebars, if you're doing a double screen on Figma, you can hit Cmd+Period to hide those. It'll give you a little bit more real estate. And I don't know what the command is on a Windows machine, but it is probably Ctrl+Period, okay?
[00:02:37] So let's say I'm choosing this, I've got 1M here. This is my paragraph text, okay? That's gonna stay the same, it's base 16. The H5 is now going to be 1.25M, so let's change that. Let's go 1.25M, and instead of 18 pixels, it's going to be 16 pixels.
[00:02:55] This is what you would see in a traditional design system, or a design kit from someone. They would do something similar to this, okay? So find your scale, find your font. Now, let's say I want to change this font family too. You can pick a random font, find a font you like.
[00:03:12] Not that one, that one's cursive, and that's gonna be really hard to read. And we're gonna do the same thing that we do with colors. Okay, we're gonna actually create text styles out of these. So we did color styles, now we're going to do text styles. So once you get your fonts, the way that you want them, again, click those four dots here, and you hit plus to create a new text style.
[00:03:33] Let me do that on here. So we've got this. Now let's say it's 20 pixels. I'm going to go in, create a new text style. I'm going to call this H4. You can label it however you want, it's just for you. Now I call it H4, and I've got a text style.
[00:03:48] So if I create some new text, which you could do just by pressing the T on your keyboard, creating a new little text box. I have some text here. You can now highlight that, click those four dots, and your text style can be applied, so H4. Go find your font family, go find a font scale, using this visual type scale calculator, type-scale.com, and let's create some text styles.