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.
-
-
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 -
Replying to @mwichary @chlabacher
I experimented with more guides, but unfortunately they get more noisy, so something smarter is required.
1 reply 0 retweets 1 like -
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
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. :·)
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.