Hi everyone, have you got a button like this... where you said the padding needs to be 8 at the top and 8 at the bottom... what's this giant gap, and can I turn it off? The short answer is "Yes," go to your three little dots... and switch it to this thing called Cap Height to Baseline... look at that, let's dive into that a little bit more.

All right, what is the problem? This text box here has space at the top and space at the bottom, what is that? It's a problem found in every single Type design program... it's kind of a pain, but there are workarounds around it... in CSS, it's called Leading Trim... Lead, like the metal, Leading Trim, another word for Line Height...

Figma calls it the beautiful word, where is it? Cap Height to Baseline... and you can leave it Standard, or you can treat it more like an object... which is really handy... it gets worse, like I've made this Auto Layout button... and we're using Inter, which is the default Figma...

and it's reasonably consistent, you see, there's a bit of... space at the top, and there's a bit of equal distance at the bottom... but if I'm trying to use, like, let's hold down my 'Option' or 'Alt' key... can you see, I'm trying to use 8 at the top and 8 at the bottom... it's not really 8, is it? It's 8 plus...

another 3 pixels there, and another 4 pixels at the bottom... and it gets worse depending on the font. So I'm using Leto for my font, can you see... this one sinks down even further, what is this giant gap at the top? Look, there's only 3 at the bottom, so even though it still says 8... it's a really off-centered button, and like before...

the way to combat it, let's hit 'Enter' to go inside of our Auto Layout... let's go to this option, and we can choose 'Cap Height to Baseline'... or 'Leading Trim', nice, now it feels more like 8 to 8... there's always going to be strange fonts... it's up to the typographer to see where the cap height is... can you see, the cap height on this is...

where the blue line is, which is the top of the capital letter... that's the Cap Height... but for this particular letter, for B, it's a little bit above it. Let's have a look at some other ones... Capital T, is above it, they're all above it... for some reason, Leto, the designer decided B was going to pop out the top there...

not the same for Inter, it's a little bit below. So there's always going to be some quirkiness there... but I think that Cap Height to Baseline really kind of solves... a lot of our layout problems... especially when we start adding things like icons... so let's add an icon, 'Shift I', let's add our tick...

going to add it into my Auto Layout... and let's have this thing off... so I'm going to turn my Cap Height to Baseline back to 'Standard'... checked. and I say, Auto Layout, you are 'Centered'... what you'll notice is, there's nothing centered about it, look...

you know, like the tick is way above the B, and nowhere near the baseline... but if I go into this and say, you are this sweet new Cap Height Baseline... oh, look at that, they're centered, happy days. Mine feels a tiny bit off... because there's no descenders can you see my baseline... I've picked a word that has no descenders, nothing goes below the line...

but if I type in... that was a total accident... "Sign Up", oh, looking down at my keyboard, look up... what have you done? Can you see, now... all right, pause, I'm back, get my game face on, "You're professional, Dan"...

can you see, now there's these descenders. So now it's kind of a little bit more lined up, there you go... when you're doing buttons, you're doing text... just turn the Cap Height to Baseline... just take it on, you can't turn it on by default yet... you can set it in your Text Styles when you're making it...

so when you make a style, it can be part of that, which is perfect. One thing you might have to do is... is that you send this off to your developer, and they build it... and it ends up looking like this... with things kind of not quite lined up, just talk to them about... it's a relatively new CSS Class called leading Trim...

not leading, Leading, like the Lead metal... and if you're still having problems it might be down to the font... have a little look at it, it might be doing some crazy stuff... that is not controllable in code... you can kind of fix it by right clicking and saying, 'Outline Stroke'... but now it's not a font, it's just a shape...

and very hard to implement on the app site or the website... sometimes we do just need to live with a tiny bit of unlined-upness... there you go, Leading Trim, or Cap Height to Baseline in Figma.