Hi everyone, in this video we're going to look at why people care so much... about setting their line height, or leading... space between lines to percentages... rather than the default in Figma, which is Auto... the quick explanation is - I'm going to turn my Grid on. - it's, if I'm using an 8-point grid...

which a lot of us do for consistency, look at the ugly old Auto... it says, I'm kind of halfway through the white line, and then... oh, just down the bottom of it... now I'm in the pink line, I'm willy nilly, I'm everywhere... it's hard to line things up with that text box... and it's really hard to be consistent across lots of pages...

whereas my percentage here, look, lining up the white line... also lining up the white line, you're also lining up with my 8-pt grid white line... and it makes it easier to line it with other text, and boxes, and images... oh, it's very exciting, kind of... useful though, let me show you how to get it going. So let's add it first and then talk about why it's useful...

so I've got some text in here, some Lorem Ipsum... over here, where I've got my leading, or line height... we can type in, instead of say, Auto... at the moment Auto will pick the line height appropriate for the font... and it's kind of defaulting to 16 here, if I bump that up to say 24... and I click on 'Auto', you can see, it's using 29...

I don't want it to pick numbers outside of my 8-point grid that I'm using... so what I'm going to do is use percentages, I'm going to go 'undo'... so I've got 16 point, instead of Auto, I'm going to type in, let's say, 100%... so it's an easy one to understand... it's probably too tight for what I need... but it's good to understand this principle, I'll probably use 150...

because it's a percentage, it's in relation to this. So what is the line height, or leading for 16 point? Is 16 point, what if it was 200%? It'd be this times 2, which is 32, come on, brain... if it was 150%, be 24... the editor, cut out my long pause, I hope.

So why is that useful? Let's turn on our 8-point grid... and if you're following along the course, you should have... if I click on my parent frame here... I just made an empty one... you should have a Grid style ready to go...

if you don't, let's just quickly make a new one. So I'm going to go 'New Grid', I'm going to change it from a Grid to 'Columns'... and the amount, put in loads, and we're going to start at the top... and go 8 x 8 x 8, there you go. So my 8-point grid, what I'd like to do is... get this text box lined up to the top here...

and can you see now how... that everything kind of sits in an even spacing now... if I go back to, let's do two of them... so let's make this one smaller, and let's make this one here... so if I do the one that's just set to Auto, which is the default... can you see, it sits kind of just a little bit above the pink line here...

and then this one's a little bit lower, and then it's kind of halfway... it's getting halfway up, oh, way down at the bottom now... it's just inconsistent for laying things out... you can totally do this, there's nothing wrong with it... but if you're laying out a really complex site... and you want consistency across layout...

which a lot of us do as designers, then using 8-point spacing is great... and then using the percentages for the leading... means that things will line up with other text boxes... and if I'm drawing things, and I'm using the grid... so I'm going to use my 'F' tool for a Frame... can you see how things will line up...

a consistent amount from the top and a consistent amount from the bottom... handy for kind of like aligning images to things... and getting buttons to align, just makes it easier. So for me, in this case, 'Shift G, is there enough weight? There is not... so I'm probably going to use a 150...

it means that not a 150 line height, 150%... that is really common, it's quite open... you've got to decide if that's right for you... but using 150% means, when I'm looking at my grid... things still end up in a similar sort of spacing... can you see, this one's just a little bit below the pink...

and it's kind of alternate because we're using 150... so it's just a little bit below the white here... just a bit below the pink, below the white, below the pink... it's consistent, means I can still line things up... where it gets really cool, is one of the new features in Figma... which we'll do properly in the next video...

but just to give you a hint... is at the moment, because you're like... "What is all this, why doesn't it line up with that?"  because you have to do this, and you're like, "Okay, I can do that"... but what if there was an option under here, under the Text... those are the three little dots, there's this magic new thing... it says, Cap Height to Baseline, look at that...

everything kind of matches up the top, so the top of the cap... that's what this one's called, what is it called? Cap Height to Baseline... so it's going to line things up to the cap height... so the capital letter, the top of it... and the baseline is this line down the bottom here...

just makes it a little bit easier for this outside of the frame to be lined up... but we're looking at more in the next video... because it's good for body copy, but it's amazing for buttons... let's jump over to that one now.