`. Every font produces a different amount of this block directional space which contributes to the element's size. This chaotic space contribution is not easily measured, and has been impossible to control, until now. The font knows, now CSS knows, too. [Try it on CodePen](https://codepen.io/web-dot-dev/pen/xbKjRxL) The space above and below a font exists because of how the web lays out text, called "half-leading". This is expertly covered in a post by [Matthias Ott](https://matthiasott.com/) called [The Thing With Leading In CSS](https://matthiasott.com/notes/the-thing-with-leading-in-css). Essentially, when typesetting was done by hand, pieces of metal lead were used to separate lines of text. The web, inspired by leading, splits the lead into two pieces and distributes a piece above and a piece below the content.  A headline is shown with a hot pink bar above and below the text to demonstrate half-leading. [Source](https://matthiasott.com/notes/the-thing-with-leading-in-css) This history is meaningful because, `text-box` gives us names for each half: over and under. Plus, the ability to trim it off. There is prior art to `text-box` also, you may recall the exciting post from Ethan Wang called [Leading-Trim: The Future Of Digital Typesetting](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202), where `leading-trim` (the name `text-box` previously had) was first introduced.  Your entry point into text trimming might be from [Figma and its "vertical trim" controls](https://help.figma.com/hc/en-us/articles/360039956634-Explore-text-properties#h_01H96FW9Z3W7J7Z2HEN8V17BZT) for designers. [This X post demonstrates where this vertical trim option is](https://x.com/figma/status/1640750882613493760) and how it's helpful for buttons. [Source](https://x.com/figma/status/1640750882613493760) Regardless of how you got here, this small sounding typography control can make a big difference. ## Feature and syntax Here, in my opinion, are the two most common one-liners you'll need when working with `text-box`: h1 { /* trim both sides to the capital letters */ text-box: trim-both cap alphabetic; /* trim both sides to the lowercase letter x */ text-box: trim-both ex alphabetic; } Trimming both to `cap alphabetic` will be the most common use of this feature. The following demos use this many times. However, the previous example also shows `ex alphabetic` because it's useful for optical balance in its own unique ways. ### Explorer playground [Explore the syntax in our playground](https://codepen.io/web-dot-dev/pen/RNbyooE), and see results using drop-down menus. You can change fonts, change over and under trim values, and follow along with the color coded visuals and labels.  The syntax preview with text-box: trim-both cap alphabetic syntax highlighted and shown. There's 3 more drop-downs to choose trim values. **Things to try:** 1. Visually inspecting how `text-box-trim` works across single line and multi-line text variants. 2. Hovering over a variant, seeing the trim values used to achieve that effect. 3. Changing the font. 4. Trimming only one side of a text box. 5. Review the syntax as you play. [Try it on CodePen](https://codepen.io/web-dot-dev/pen/RNbyooE) ## What can I build and what problems does it solve? There are some much simpler centering and alignment solutions that emerge from this trim capability. You can even get closer to proper leading, where something like `gap` can be used between contents.  The first group has half-leading, the second has trimmed leading. The result is the second group is tighter together. [Try it on CodePen](https://codepen.io/web-dot-dev/pen/RNbyoKE) ### Easier centering For smaller, more inline and content intrinsic components, `padding: 10px` is a reasonable style to specify for an element for equal spacing on all sides. However, the result can confuse people, as it often has extra space on the top and bottom. To work around this, developers often explicitly putting less padding on the top and bottom (block) to offset the effects of half leading. button { padding-block: 5px; padding-inline: 10px; } At this point we're left to try value combinations until things are optically centered. This might look good on one screen and operating system, but not on another. `text-box` allows us to trim the half leading space from the text, making equal padding values like `10px` useful: button { text-box: trim-both cap alphabetic; padding: 10px; }  The first shows an element with padding: 10px and half-leading. The second shows the same element with text-box: trim-both cap alphabetic. The result is the second button is optically centered. [Try it on CodePen](https://codepen.io/web-dot-dev/pen/NPKMbgq) > [!NOTE] > **Note:** The following examples show a regular sans serif font and an alternative fancy or fun font. Showing multiple fonts helps illustrate the dynamic capabilities of `text-box` and how it works across font families. Here are a few `` elements that show how trimming the space with `text-box` makes `padding: 10px` look equal on all sides in a practical interactive element. Notice how the alternative font can produce some wildly different half leading space.  Each font has different half leading space, but the trim values are the same and can normalize the space. [Try it on CodePen](https://codepen.io/web-dot-dev/pen/mybLOMg) Here are `` elements, often used to show categories or badges. Another moment where equal sided padding should be the best solution, but until `text-box` we've had to work around it.  The second group of tags are tighter and optically centered, thanks to trimmed leading. ### Easier alignment The extra, uncontrollable, half leading space above (`over`) and below (`under`) a text box also makes alignment difficult. The following examples show when half leading can make alignment difficult and how trimming the block sides of a text box can create better alignments. Here an image is placed next to text. The image grows to the height that the text needs. Without `text-box`, the image is always a little bit taller. With `text-box`, the image can perfectly align with the text content.  [Try it on CodePen](https://codepen.io/web-dot-dev/pen/yyBjVpg) Notice the whitespace is above the first formatted line of text and below the last formatted line of text in scenarios with line wrapping. In the following example, notice how the feature [logically adapts](https://web.dev/learn/css/logical-properties) to a change in [`writing-mode`](https://developer.mozilla.org/docs/Web/CSS/writing-mode). Try changing the text, watch how the layout continues to stay aligned.  [Try it on CodePen](https://codepen.io/web-dot-dev/pen/dPbeOJQ) ## Continue studying Want to know more? The following list of links offer various amounts of additional information and use cases. - [Codepen collection of all the demos](https://codepen.io/collection/zxQBaL). - [Great research and demos](https://github.com/jantimon/text-box-trim-examples) by Jan Nicklas. - [Two CSS Properties for Trimming Text Box Whitespace](https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/) on CSS Tricks. - [CSS Inline Layout on text edges](https://drafts.csswg.org/css-inline-3/#text-edges). - Not to be [confused with `size-adjust` or `ascent-override`](https://web.dev/articles/css-size-adjust) - [CSS Baseline: The Good, The Bad And The Ugly](https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/). - Applied to many HTML elements: [CodePen](https://codepen.io/nileshprajapati/pen/RweKdmw). - [Safari's blog post](https://webkit.org/blog/16301/webkit-features-in-safari-18-2/). - [Why I'm excited about text-box-trim as a designer](https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/).