Have you ever noticed that line-height ruins your design system's spacing?
Here's what's going on🧵:
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.
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
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.
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.
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.
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-pl…
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-pl…
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.
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.
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.
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-desi…
This great post on leading-trim by Ethan Wang which turned me onto the whole thing
medium.com/microsoft-desi…
This brilliant piece by @mwichary on the Figma blog about their move over to half-leading.
figma.com/blog/line-heig…
figma.com/blog/line-heig…
Here are some interesting articles about type design in other alphabets:
keithtam.net/designing-with…
hayataki-masaharu.jp/web-typography…
keithtam.net/designing-with…
hayataki-masaharu.jp/web-typography…
• • •
Missing some Tweet in this thread? You can try to
force a refresh
