Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!
J A S O N@jscottpearson
Any hints on baselines and line-heights?September 11, 2018 at 3:28pm
Right now huge problem with spacing around text objects, cause its impossible to have proper text-heights of text layers with autoresize and line-heights that are more then 100%. Anyways to use baseline as measuring point? Or maybe some fix for baseline is coming?
September 11, 2018 at 3:29pm
Baseline grid would be nice, but I don't see it in the stars. Otherwise use a vertical grid layout then you can align baseline to that. Use px line heights multiples of the vertical grid.
September 12, 2018 at 6:54am
September 13, 2018 at 5:16pm
It works fine for me I can get perfect baseline alignments
Where on a line text sits depends on the specific font used. A typeface defines many values affecting this, though the most important ones are ascender (how far above the baseline things extend, like upper-case "Å") and descender (how far below the baseline things extend, like lower case "g"). In this case you might be using a font that has a large descender (the space under the baseline) though more likely is that you've set a line heigh higher than 100% and aligned the text to the top.
Here's a visual overview of various text alignment and line height, how it affects where text sits inside its bounds (yellow.)
If this didn't help answer your question, would you mind providing a few concrete examples of where things doesn't work the way you expect? Thanks.
September 21, 2018 at 1:22pm
i understand how fonts work, however in Sketch I can address the problem with actual layer size, in figma however not, which makes vertical alignment of elements hard https://www.figma.com/file/S7vywPHMBKHVzVA17K3ZllRQ/Untitled?node-id=0%3A1
so in html scenario the box will be closer to actual text, same in Sketch
in this case I have 150% line-height, if I will try vertical middle alignment, in this case my padding from top can be messed up and so on
December 28, 2018 at 3:51pm
December 29, 2018 at 6:46am
January 3, 2019 at 4:00am
They need to fix the reference link in that other thread.
January 3, 2019 at 11:33am
March 26, 2019 at 4:50pm
I'm using the font Source Serif Pro, which is a Google font, with a non-100% line-height. In this example, I'm using 45px font size with 46px line-height.
It renders the same way on Chrome and Safari (though at even smaller line-heights, those two browsers differ in their behavior) -- 96px height, with a 10px baseline.
However, in Figma, I can't generate this behavior with any of the alignment settings. "Align: middle" is the closest, but its line-height is (more accurate?) at 92px, rather than the 96px used by Chrome and Safari.
Perhaps the question should be for the Chrome and Safari teams, but I'm wondering if there's a general Figma solution you can recommend when using non-100% line heights?
Here's a different case. If I set line-height to 100% in Figma (the default) and line-height: 100% in css, none of the alignments match between Figma and Chrome/Safari.
April 3, 2019 at 11:19am
April 7, 2019 at 11:32am