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 @chlabacher
I agree on the cap height/baseline and font normalization stuff.
1 reply 0 retweets 1 like
I experimented with more guides, but unfortunately they get more noisy, so something smarter is required.
-
-
Replying to @mwichary
I can definitely understand that! I also totally see why you didn’t implement multiple modes. But I can’t help imaging switching between "web mode" and "precision mode"
1 reply 0 retweets 0 likes -
Replying to @chlabacher
I’d hope there’s a way to do this. I want cap height, I want true vertical centering, I want optical font size normalization… we’ll get there. :·)
0 replies 0 retweets 1 like
End of conversation
New conversation -
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.