Video summary
One of the most persistent frustrations in CSS is how spacing often feels visually unbalanced, even when top and bottom padding values are identical. This issue stems not from a flaw in the language itself, but from inherent font metrics that include extra space for accents above letters and descenders below them. Consequently, elements can appear shifted upward or downward depending on the specific typeface used, causing layouts to look misaligned. This problem is particularly noticeable when switching between different fonts or when using CSS gap properties, where the perceived spacing varies significantly due to these underlying font characteristics rather than the actual layout values defined in the code.
The root of this inconsistency often lies in the workflow between design tools like Figma and web development. Designers frequently use a "vertical trim" setting in Figma to manually adjust padding so that elements appear evenly spaced on screen, effectively hiding the extra font metrics space. When developers then implement these designs in CSS using standard padding values, the spacing appears off because the browser renders the full font metrics without any automatic trimming. This discrepancy leads to situations where a design looks perfect in one environment but requires constant tweaking and "magic numbers" in another, creating an inefficient and error-prone development process that has plagued web designers for years.
Fortunately, this long-standing issue is now being resolved with the introduction of the `text-box-trim` CSS property, which is currently shipping in Firefox and supported across all major browser engines. This new feature allows developers to explicitly tell the browser how to handle font metrics using the `text-box-edge` property, offering options like `cap` for the top and `alphabetic` for the bottom to align content with specific baseline heights. By applying these settings, developers can ensure consistent spacing regardless of the font family used, eliminating the need for compensatory padding values and allowing the natural design intent to shine through without the visual imbalance caused by hidden font metrics.
Adopting this new standard does require a slight adjustment in mindset regarding padding sizes, as the effective space available will appear larger once the extra font metrics are trimmed away. While this might initially make existing layouts seem too spacious or cause gaps to look smaller than expected in browser inspectors, the long-term benefit is a much more predictable and consistent web experience that works uniformly across all fonts. For simple components like buttons or single-line text elements, using `text-box-trim` with both top and bottom edges set will become the new normal, solving the age-old problem of uneven spacing and freeing developers from the endless cycle of guessing and adjusting values to achieve visual balance.
Read the full video transcript
Hello, my friend and friends. One of the
most annoying things in CSS is how the
spacing can feel off when we're doing
stuff, right? Uh and this happens I have
the same padding on the top and the
bottom, but it's not the same. And that
happens because of the way fonts are.
And this isn't CSS's fault, this is just
literally font metrics. And it's because
they add space for like accents on the
top and the the descenders on the
bottom. But the problem with that is it
can just make things feel really
imbalanced. And maybe the more annoying
thing with it is while like this has
looks like there's too much space on the
bottom. I'm using Josephine Sans here,
which tends to be that one where
everything seems shifted up. But if I
switch to a different font, then the
spacing's different. So even if I magic
number things to be right in the middle,
as soon as you change the font family,
it's an issue there as well. And another
place this actually crops up that you
might not have realized is with layouts
like this where you're just using a gap
to create the spacing. Because even
though I'm using gap here, you can see
there's more space around these than you
might have realized. And once again,
that's that extra space that just comes
with the font metrics. And you can if
you select text, you'll see where that
space is and that extra space just part
of how the fonts are created in the
first place. And even more annoying is
if you're working with designers who
notice this extra space, which is
actually something that can happen
because in Figma, if we have a design
like this one right here,
if I take a look at my button, the
spacing around it is all equal. And if I
take a look in the text here like my
gaps here, the spacing is all equal. And
the reason all of this spacing is equal
is cuz some designers are going to come
into the settings on Figma and there's
this vertical trim option. And so like
if I turn this off, we can see that the
spacing goes back to what it would be
like in CSS. But designers notice this
type of thing and so some of them will
come in and change that. The same on the
button here. They might go on the text
of their button and once again, they
switch from the default to the vertical
trim so they can put equal spacing
around it. And then we're writing some
CSS and you say, "Well, I'm using the
exact values that you had in your design
file and they're like, no, the spacing's
way off. Well, now you know why, but
there's luckily a fix in CSS now, which
is to use text-box trim. And the reason
I've decided to talk about this today is
because I'm very excited as Firefox is
now shipping this, which means it's now
in all of the browser engines. But, when
we look at the button there, it hasn't
actually changed yet when I bring this
text-box trim in. And the reason that
hasn't fixed anything yet is we've set
the stage, but now we have to say, how
are we going to trim it? Because unlike
Figma, we have a few different options
that we can use. And those options come
by using the text-box edge property. The
default value for this is auto, cuz if
not, it would just muck up every website
ever made up until now with all the
spacing. And if you're using auto, it's
basically the same as saying text for
both the top and the bottom, which is
what I'm doing right here. And on the
top, we have a couple of different
options. The first one we're going to
look at is cap. And you can see now that
I don't have any extra space up here.
The box itself is now lining up exactly
with the cap height of my my font here.
And so, it's exactly there. And then in
the bottom, we only have one choice for
the bottom, which is alphabetic. And I
don't know why they didn't go with
baseline and they went with alphabetic.
I know typography people were involved
in making this spec actually happen, so
maybe it was something there. If you
have any inside information on this,
please do let me know in the comments
below. Uh but we have alphabetic, which
is going to line up with I guess the
alphabetic baseline of our text. Maybe
it's cuz in vertical modes, it's not a
baseline. I'm not sure. Uh anyway, you
can see it's now lining up exactly with
the baseline and it's perfectly tight
with what we have. Uh I did mention that
we have more options than in Figma. And
that other option that we have is for
the top one, which instead of going to
the cap height, is the x-height. This
could be useful for certain situations.
Um you can see there, it's the x-height,
which is just like the lowercase letter
height. Again, this could be useful in
some situations, but uh I think most of
the time you are going to use cap and
alphabetic. You do have the option of I
did trim both here, I sort of glanced
over that, but what you could do if
you're using trim is you could say that
you only want to trim the start and then
it will only focus on the top or you
could do a trim end and then it would
only take off the bottom. But again, I
think most of the time it will be a trim
both cap alphabetic. And if that's the
case, you might as well just use the
text box shorthand that we can see right
here with a trim both cap and
alphabetic. Now, there's a really
important thing to be aware of if you're
using this though, which is let's turn
it off for a moment and put that padding
back on that we had. And with the
padding there, which it's not perfect,
it's off by a little bit, but you
probably have some go-to numbers that
you usually use for your padding. And
the problem is as soon as you use text
box trim, those numbers go out the
window a little bit because it looks
like you didn't actually add any padding
on the top and the bottom anymore cuz we
don't have that extra space that we were
dealing with. So, the numbers you might
used to be dealing with are going to be
larger than they used to be on the top
and the bottom. It is going to take a
little bit of getting used to for that
type of thing. I know for me that's been
something that has been there. But the
really nice thing with this is it
doesn't matter what font you're using
now, right? So, here
I have too much space on the top. My
Josephine Sans has too much space on the
bottom. And as soon as I use this,
doesn't matter what font I'm using, it's
always trimming it to that font space
line and cap height and it means your
spacing will always be consistent. So,
it's worth getting used to putting in
some new numbers. The other place that
you're going to have to get used to this
if you decide to use it in places where
you're using gap is once again, those
spaces are going to look like they've
just vanished away. But even though it
looks like the space is completely
vanished, it's actually still there. We
have like the descenders and other
things eating into that space, so it
looks a lot smaller than it was until we
turn on the visualizer. So, it just
means once again, you'd be bringing in
larger numbers here than you might be
used to, which looks gigantic when the
inspector's on, but as soon as I turn
that off, we can see the spacing now
actually looks normal. And in situations
like this, unless I had a designer
asking me for very specific spacing that
wasn't actually getting met. Uh I don't
know if I would do it or if you're just
somebody who really likes knowing
exactly the size there
uh or if I notice because of the font
I'm using, I guess. I wouldn't do it,
but anything that's like a one-liner,
buttons, and things that have padding
for one line other than buttons,
whatever they might be. Uh I would
definitely think this is going to become
a new normal where we're just declaring
that because it solves that weird uneven
thing of magic numbering and centering
things and coming with one line height
one and anything else that you might
have done. Uh and so yeah, a really nice
new feature that is now part of CSS that
makes our lives a lot easier. And with
that, I'm going to say if you enjoyed
this video, there's also another one on
screen right now that you might also
enjoy. And with that, a very big thank
you to my enabler of awesome, Johnny, as
well as all my other patrons and channel
members for their continued support. And
of course, until next time, don't forget
to make your corner of the internet just
a little bit more awesome.