Additionally Bert Bos’ statement seems completely bogus: a text block in CSS doesn’t have any space on the left and right side either, so adding a background wouldn’t work
Also, isn’t that what padding is for? Half-leading makes it much harder to apply precise padding
(5/5)
-
Show this thread
-
Replying to @chlabacher
Hi, thanks for writing. Hard for me to respond with anything new that wasn’t already in the blog post, but tell me how this makes things harder? Ideally with specific examples, if possible?
1 reply 0 retweets 0 likes -
Replying to @mwichary
Imagine you have a piece of text that you want to place on a colored background, with equal spacing to all sides. With Half-leading the spacing is not (n)px on all sides anymore, but (n)px on the left and right side and (n)px - (lineheight/2) on the top and the bottom.
1 reply 0 retweets 0 likes -
Replying to @chlabacher @mwichary
The previous way of handling line-height in Figma would not have been optimal as well, because of the leading below the last line. This is where the the comparison to handset type is handy: you wouldn’t insert leading underneath the last line in your composing stick …
1 reply 0 retweets 0 likes -
Replying to @chlabacher @mwichary
Another example: Two boxes next to each other, each with "padding-top" and type inside. The type is in different sizes. Depending on the typesize (and therefore line height) the CSS-way inserts different amounts of space.pic.twitter.com/IiVUsNXOe0
1 reply 0 retweets 0 likes -
Replying to @chlabacher @mwichary
I’ve had a fair share of work with vertical measurements of font files myself and have poured over that glyphs article you linked to for hours, so I know the struggle
I was very impressed with how well Figma handled cap height and baseline before …1 reply 0 retweets 0 likes -
Replying to @chlabacher @mwichary
I just wished the type box would go from Capheight to Baseline, with overhanging diacritics. [And if some typefaces were not perfectly aligned because of their internal measurements that’s no optimal, but at least the tool wouldn’t make it worse …]pic.twitter.com/5q84EqEsFv
1 reply 0 retweets 0 likes -
Replying to @chlabacher @mwichary
Another example: the red lines are baseline and the bottoms of the two text containers. It’s easy to do thanks the Figma’s great baseline smart-guidelines. But if I manually adjust the text frame to end at the baseline the text is drawn the same but the boxes are aligned properlypic.twitter.com/3W5ONoYG5O
1 reply 0 retweets 0 likes -
Replying to @chlabacher
Thanks for these. For the two blue boxes example, is the end goal a website, or…?
2 replies 0 retweets 0 likes -
Replying to @mwichary
I am wondering if it matters – shouldn't the design depict the intention (having the same amount of space on top of both texts) rather than the curiosities of the implementation (it is really hard to do that with CSS)
1 reply 0 retweets 0 likes
Yeah, but we cannot pretend implementation doesn’t exist. You can always nudge things up on your canvas. :·) Also, alas, the blue boxes example wouldn’t do the expected thing under the old system either – there’d still be the ascender–cap height space above. :·/
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.