Type Scale Worksheet

Hey, this is Billy from the Headway Design Team. I just want to kind of go over a new resource that we just put out in the Figma community page.

When you go to the headway page at Figma community, you will see this new type scale worksheet that's available here.

And I kind of want to just kind of show what we've been doing with it. We've been using it for a while, and we thought this would be a good resource for the community to have.

So in the type scale worksheet I've already got downloaded and everything like that, you'll notice there's a couple of pages.

We have our templates, our working space, and then just the local components. We're using the templates. We've just pulled in some of the different type scales that we end up using a lot on various projects, whether it's a mobile app or a marketing site.

We've got sort of the different scales that we're using here. Each one of these little cards will have the title of the scale the multiplication that you would do.

So for example, if I were to pull a type out here at 16 pixels, let me switch out the white so you can see.

And we will detach a style and I wanted to get the next size up. I can just take this 16 do times 1.067, and then I'll get the next size up for for that scale.

So we have that, that value available here. And then we have all of these set as type styles or textiles and figma available here.

So you can kind of keep this, add your own if you wanted to delete the ones that aren't valuable to you and then just have a good baseline for everything that you're, you're setting up here.

Now the way we use this is, like I said, we'll have our 16 or 14 but we'll go to our working space and I'm gonna pull this big one here.

But what we'll do is when we start to figure out, when we're choosing fonts and type four various projects, we'll start to look at maybe the different scales that we want to use.

What does the ratio look like? And we'll actually copy these down. And these ones are detached from the type style.

So you can actually work with these and we might start pulling in some different fonts to see, you know, how does this look in combination with other things.

So let's say we're working on I don't know, a metal band website. And so we'll pull germania one in here, and then, you know, we might pull in instead of enter, we'll use like maybe a roboto for the body copy, things like that.

Or we'll pull down this augmented fourth and we'll, you know, make an adjustment to the top, maybe using IBM plex mono.

And then make kind of a hacker theme website here. And then we'll do like rebato for our body text, things like that.

So we can kind of see what those look like. And we'll go through a couple of iterations of this. We might go in here and start changing some of the weights As we start to work through our different headlines and things like that.

And we'll add different styles or different elements in here. We'll kind of keep it light and then you know, start with a little bit and then add more as we need to.

So if we need some display sizes, we might pull those in. Or if we need some more headlines, we'll pull those in and make those adjustments accordingly.

One thing to note in here like I said, we have the multiplication ratio here for the type size, but the line height, we've rounded the line height for most of these.

I think all of 'em to just be the, a pixel grid so that everything with auto layout lays out nicely.

You can always go in and make those adjustments. So taking this and multiplying it by the 1.2 or 1.5 and kind of making it work for you for us, we like to kind of have our line height fit on that eight pixel grid.

Makes everything just kind of work nicely with auto layout, very easy for translating and handing that over as well. So let me know if you have any feedback, if this is useful for you.

As we keep putting out different resources. I look forward to seeing how you guys use it and remix it and make your own version of it.

Thank you all.