How does the Text Line height works in Sparkle?

[luciandesign]

Hi! I’m trying to understand how Text Line height property works in Sparkle.

1. What does the number represent?
2. If the font size is in pixels… How do we calculate the line height in pixels ?

Here is an example, and why it is confusing:

1. I’ve set the Font Size to 62 (I guess these are px) and the Line height to 1 (in Sparkle)
   

   

2. In the preview, if I inspect the CSS property of the element I can see that the font size is indeed 62px, but the line-height is 1.227 (in pixels this means 76.074px)
   

   

I want to set the Line height to be the same as the Font size … How is the line height calculated?

[duncan]

The Sparkle setting is the multiplier. A value of 1 means the same line height as the text height, 1.5 means it’s one and a half time, etc.

What you see in the browser is what you see in the canvas, that’s what matters. You can trust Sparkle to be computing the right values, unless you see a discrepancy between the canvas and the browser, they are correct.

You are assuming the CSS values mean what their property names suggest they mean, but they actually don’t. Text metrics of plain CSS and normal desktop software have wildly different assumptions, and work very differently.

It is not our business here to discuss the intricacies of CSS, so I’ll refer you to a resource that does precisely that in great detail:

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De...

[luciandesign]

Thanks @duncan
I guess I was confused because I’m trying to implement a design that I’ve done in Adobe XD in Sparkle and the same settings have different effects.
My expectations were to have the same results.

I guess I need to do some calculations to compensate.

P.S. I think the easiest would be to be able to set in Sparkle the value in pixels (not as a multiplier … because from what I’ve seen in your reference and the way Sparkle is computing the line height… the line height is not necessary equal to the font size … and in the end we don’t know what we will get)

[duncan]

I think Adobe is using their own text layout which differs from the normal text layout in macOS, or alternatively the Montserrat used in XD is not the same Montserrat used in Sparkle (since we used it for the Sparkle site I know there are a couple variants at least).

There is no difference in how Sparkle would generate the code in the browser, regardless of how it was expressed in the user interface, again the point is preserving the WYSIWYG nature. I have noted your preference for expressing it in pixels.