Line-height in a design system

•

Have you ever noticed that line-height ruins your design system's spacing? Here's what's going on🧵:

Let's rewind to the 1500s for a second. To make paragraphs more readable, typesetters needed to create space between type blocks. They did this by slotting little strips of lead between the rows - hence the name leading.

Here's the important thing. This leading was always below the type block. 4pts of leading plus a 16pt type block meant you had 20pt line height

Fast forward to the mid-90s and the inventors of CSS took a different approach. They split the leading and added half to the bottom and half to the top of the box - this came to be known as half-leading.

Why did they do this? Well, imagine putting a stroke around a block of text with all the leading at the bottom. Splitting the leading up allows the text to sit in the middle of the block, rather than squashed up against the top.

Half-leading solved a bunch of problems but it also created a handful new ones. Spacing between text is hard to predict and vertical alignment of text inside containers is annoying.

It's not just CSS that does this: CSS: half-leading iOS: half-leading Android: bottom-leading Figma & Sketch: half-leading macOS: 🤷 Windows: 🤷 Here's a tool to check out the different platforms: aresluna.org/line-height-playground/

But there is good news! There is a CSS spec for something currently called leading-trim which allows you to trim the leading off a text box without cutting off the text. It gives you control over how you would like the line height calculated for layout.

Why give you all this flexibility? Well interestingly not all alphabets use the same baseline.

The bad news is, this is still being worked on and it's not clear how long it will be before it is available - this started back in 2018. Not to mention that Figma and other design tools will need to deal with the new options.

Here are some resources if you are interested in learning more: This great post on leading-trim by Ethan Wang which turned me onto the whole thing medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

This brilliant piece by @mwichary on the Figma blog about their move over to half-leading. figma.com/blog/line-height-changes/

The draft spec for leading trim. w3.org/TR/css-inline-3/#leading-trim

Here are some interesting articles about type design in other alphabets: keithtam.net/designing-with-the-hanzi-script/ hayataki-masaharu.jp/web-typography-in-japanese/#.YWXXPy1Q0to