https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202
In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem. The example below shows distances between text boxes set to 32px. As you can see, all the vertical spacing is visually much bigger than 32px, even though you set them all to the same value.
This is a common problem that spans tools and platforms. In my last Medium article, I talked about how I use the 4px baseline grid to measure spacing around text and achieve better visual accuracy. Knowing the imperfections of this approach, I kept searching for a better solution. Last June, I came across an emerging CSS feature spec called leading-trim. I’ve been working with the author of the spec, an expert from the W3C CSS Working Group, fantasai, to make sure Microsoft Design can be a part of this transformative work.
Today, we’re excited to announce that Microsoft Design is sponsoring the authoring of this new spec. This article gives an introduction to this new CSS standard, leading-trim, and what it could mean for web designers and developers.
To understand how this became a problem, specifically on the web, we need to go back in the history of typography. Around 140 years ago, type was still set manually with individual lead boxes. To make text more readable, typesetters would put strips of lead to space lines out. (That’s where the word “leading” came from 😉) The height of the type block plus the leading add up to the total line height.
Early graphic design software in the ’80s kept the same tradition where people could add bottom leading directly to control spacing between lines, and line height would increase as a result. Other software made it a two-way street, where people could adjust the line height directly. But behind the scenes, bottom leading was always the part that was changing.
Things diverged after the invention of the web, with CSS1 debuting in 1996. The people who created CSS1 decided to split leading in half and put it above and below each line. They called it “half-leading.” Their reason was simple: make text boxes looks even.
Leading was split in half and put above and below each line since CSS1. The browser window shown above is Internet Explorer 3.0. IE3 was the first commercial browser with CSS support. The font used is Verdana, released with the Core Fonts for the web project initiated by Microsoft back in 1996. In case you are wondering, the curves in the browser chrome are not a watermark.
While half-leading creatively avoided uneven bounding boxes, it introduced its own problems. Each font size in a font family comes with a default line height. Default line height is usually designed to be taller than the text it contains to accommodate certain characters and accent signs. Increasing line height then adds two half-leadings, making the text box even bigger. Half-leading, together with the extra space reserved in the default line height, is the root of our text box frustrations today.
The anatomy of your average text box
Some of our most popular UI design tools, such as Figma and Sketch, seem to have adopted the half-leading model and render text this way. So we experience this problem in both our design tools and browsers.
The workaround on the design side is relatively easy: you can ignore the bounding box and directly measure space against text’s cap height and baseline. It’s a manual process because most design tools don’t have snap targets for cap height and baseline, but I know we designers will do anything to make our design look good!
But if we take this approach, developers still implement only the bounding box spacing in CSS. Therefore, they would get seemingly random spacing values.