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:
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

This brilliant piece by @mwichary on the Figma blog about their move over to half-leading.

The draft spec for leading trim.

Here are some interesting articles about type design in other alphabets:


• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Dan Hollick 🇿🇦

Dan Hollick 🇿🇦 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @DanHollick

21 Jul
💡Have you ever wondered why the WCAG colour contrast ratio doesn't always seem to work?💡

Well it actually has to do with how we calculate colour contrast and is super interesting.

Hold on to your butts, this is a 🧵
Before we dive deeper, we should remind ourselves how colour actually works.

On screens we build a colour by adding together three different colours, Red, Green and Blue.

This is called additive colour.
For instance, this peachy colour is:
100% 🔴 + 50% 🟢 + 50% 🔵

On the web, we can get 16.7 million combinations of these values - so 16.7 million different colours.
Read 16 tweets
30 Dec 20
💡You might have seen a lot of chatter on here about React Server Components recently.

If you're like me, and you didn't quite understand what the hell they are, you'll find this thread helpful 🧵 Image
In essence, React Server Components are just that. React Components that can be rendered on the server before being sent to the client.

But isn't that what Server Side Rendering is? And haven't we been doing that with Next.js for a while? Image
Yes, and no. To explain lets's look at how React apps are usually rendered.

Imagine we are trying to render the Github issue UI and the components look something like this Image
Read 14 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!