[Music] what's up YouTube Welcome to a new video today we're going to be talking about typography in web design specifically and how to set that up literally where do you start how many body copy sizes how many header sizes how big should they be should they follow some rules who knows I'm going to show you how we set stuff up at tonic really easy really quick and you can take this create yourself a starting template for every project that you do and speed up that workflow so let's go right here we are in figma so you need three things for this really one you need figma or XD or sketch or wherever you're designing I'd recommend one of those three but figma is wonderful and the second thing you will need is to go to typescale. com so that's type hyphen scale. com this is how we'll be determining the type scales and thirdly you need your brain so let's go down the side here you'll see I've got some Stars this is to remind me this is what we need to set up so we've got heading start H1 all the way through to H6 and then we're going to have a text size large medium regular small and Tiny so that's five sort of body copy sizes this may seem like a lot and and when we started designing years and years and years ago we never had this many you know we maybe have two body copy sizes and our designs weren't very good we found that this scale works really well this scale is based entirely off of finsuite's Client First system which is what we use a lot of the time to develop inside webflow I will leave a link in the description so you can check that out yourself those guys are really smart they've built hundreds and hundreds of brilliant websites using these scales and you know a lot of people know of them and it just makes sense so we've got six heading Styles which every website would have H1 is the biggest heading on the page and it tells um search engines what the content of that page is about so you can obviously go off and read all about SEO and stuff we're not covering that in this video but we gonna need to set up a size for it so that's our biggest one H6 is our smallest heading and then we've got five body copy sizes so we kind of need to determine which one of these is going to be our base size this is the most important so if we have a look at type scale here if I zoom in a little bit for you we can see it's asking us for a base size and it's saying 16 pixels is a base size and then based on that these These are the kind of heading sizes that you might end up with so you can see here 48 pixels being the biggest so if we just wipe that into figma so if we say this is a heading style one H1 and we bumped this up to 48.
let's put it into inter semi bold lovely and let's track it in a little bit there we go so to me that doesn't look that impressive that's quite small and kind of current Styles in web design are quite big chunky headings I feel like something more like 72 might be pretty good so we're maybe we're aiming to try and get something quite big like that and then if we're thinking about body copy let's pop this down to 18 let's take it out of semi bold and pop it into regular let's just pull this out a bit and we can use a plug-in called lorem ipsum and let's just generate uh five sentences for now so we can have a look so something like this may be a good start 160 line height maybe we can bump that up we could talk about that later so maybe something like this could be a good place to start so we've got 18 as our body copy and then we've got 72 as our header so if we have a look back in here if we set our base size to 18 that everything is automatically responds so now here one REM we won't worry about that that's for a different video but 18 pixels let's say that's our body copy font size and then we've got our next header up from this so maybe this would be our H6 could be 22. this is 28 H5 H4 would be 35. have I done that right H6 H5 H4 H3 would be 43 H2 would be 54 and if we click this plus we can get one bigger one 68 now that's pretty close to our 72 guess so we could just run with this scale if we wanted to we can always click this button over here and this shows us what it might look like in situ so it's got all of the different heading sizes and our base size in the middle and if I just go back to regular size we can see what that looks like rather than zoomed in let's pop that back in now this is based on a scale of 1 to 1.
25 so that means the next size up is 1. 25 larger than one before so it's 125 of its previous size that is a major third scale we can have a look here and we can drop it down we can do a small scale like a minor second and you get a really gradual increase or we can bump it up and go mad with a perfect fifth and you can see now instead of having 68 which was our top size we've got 20 fights this is a really big scale and the bigger scales are kind of a bit more trendy at the moment but this is entirely up to you and it's up to The Branding that you're working with we quite often go with a major third it's pretty standard or a perfect fourth it's really nice as well and you can see here we've got 75 which is very close to our 72 that we were guessing with earlier so maybe we're going to do this okay so let's work with this we've got a perfect fourth scale instead of 18 pixels is our base size if you wanted you can change to a different font here so we could just type in enter and pop it in and see what it looks like with the font that we've chosen lovely now let's say that this is our H1 this is our H2 H3 H4 H5 and then this is our base size so where's our H6 so in this case we could say that rh6 is 18 as well so we could have an H6 which is bold and then our body copy is just regular and then you'd still get that hierarchy between kind of a little header and a little paragraph should you need it again you know this is all completely up to you is up to The Branding this might not work you might start designing with this and think you know what there's not enough contrast between these two and then you could rejig your scale so that this becomes your H6 5432 and then you can have a bigger H1 so it's up to we're going to start from here this being our H1 so it's 75 I'm going to round it up because it would be quite frustrating as a developer to come in and say all right what size is the H1 is 75. 76 that's mad let's just go 76.
so we'd come in here and we'd make this 76 and then the line height we always want to do this in percentage when we're working in figma this is because all right let's say let's say it's 120 that's usually a good place to start we can drag this and we can have a look see that feels quite nice we might want to tighten it up depending on what font we're using like 110 looks pretty good here now if we actually did 110 so that that is relative to the the font size we've chosen here it's the 76 so if we did 76 times 1. 1 PX the second work that's 83. 6 that's what that equates to if we now change this later on say we've designed a whole website and the client says Hey the headings are way too big can we make them a bit smaller and you bump this down the line height is still 83.
6 and then you're going to have to go through and calculate that all again so if we undo we're back to here where we have it in the percentage somewhere there we go and then we bump this down we can see our line height has stayed relative to the font size and that is really great for us and it's really great for our developers they can set this up as what's called unitless line height where they would just do 1. 1 Dash rather than percentage but we can just work with percentage in figma so let's go back and let's make this I think it was 76. so this is a heading star H1 nice and then what we can do is quite nice just to label these up we can pop this here and we can Auto layout these together and that looks good so now we're going to need a heading style H2 so let's just update this label H2 and we'll come back and have a look at our scale here so the next one down is 56.
83 so we can up so we can round this up to sorry did I say 56 so we'll round this up to 57 so we can grab this and we'll make this 57. easy and we'll put it down and what we can now do is we can Auto lay out these three let's put a bit more space in between them and we'll make our H3 so you can see what we're doing here and I'll speed up the video in a moment so the next one is 42. 63 so we'll go 43.
see here we've got a really nice scale here I think this is going to look great we can just bring this page down a bit so I will pause this video here I'll finish the heading Styles and then we'll come back to the body copy styles all right guys so what I've done is I've added all of the heading Styles here and I have added just a regular paragraph based on our base size here of 18 pixels for the five different body copy sizes that we've got set up top tip here what we can do is we can grab this Auto layout frame get it out of there and we can just give a background and we can give it some adding and then we've got just once one and basically which will auto update if we add any more Styles we're still keeping this all nice and tidy so let's undo those we don't obviously need those but when we come to update these later if we increase the sizes of our headings this whole frame will just scale and it'll maintain that 120 pixels padding at the side it just keeps everything nice and neat you know I like that so we've currently got five sizes all set at 18. we need some bigger ones we need some smaller ones so what we could do is we could say this 18 let's make this 20. let's make this good for 22 but maybe let's get 24.
let's make this 16 and then let's do a really tiny one of 14 and this could be you know like yeah little privacy links at the bottom of the page and stuff like that stuff that the clients don't really want people to be uh drawn to so this looks pretty good off the bat there's another option we could do we could kind of follow the scale that we've used here so if this is 18 this is 24 this is 32 so we could say this is 24 and we could say this is 32. now this could work this seems a bit ridiculous for body copy hey it's bigger than our two smallest heading sizes that's crazy but that's okay you know sometimes we might just want you know maybe this is a testimonial you know we just want it to stand out a little bit and maybe all the testimonials are quite short maybe they're like this it's not quite Big And Chunky if that could work um I think for this example let's go back to 24 20. this is a scale we quite often use and this isn't really based on anything I don't need to plug this in to here we can as you can see we've got stuff that gets smaller So Below 18 we've got 13 10 and 7.
