menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
# All channels
view-forward
# General
view-forward
# Start Here
view-forward
# Announcements
view-forward
# Design Systems
view-forward
# Plugins & API
view-forward
# Made with Figma
view-forward
# Prototyping
view-forward
Team

Any hints on baselines and line-heights?

September 11, 2018 at 3:28pm

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
centering text vertically also not helping, its still a lots of spacing below
  • reply
  • like
  • reply
  • like
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.
  • reply
  • like

September 12, 2018 at 6:54am
I dont need a grid,its more spacing between objects, which I can't use with combination of text-layers autosize, which brings strange results in Figma
  • reply
  • like

September 13, 2018 at 5:16pm
It works fine for me I can get perfect baseline alignments
  • reply
  • like
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.)
like-fill
7
  • reply
  • like
  • reply
  • like
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.
like-fill
1
  • reply
  • like

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
  • reply
  • like
so in html scenario the box will be closer to actual text, same in Sketch
  • reply
  • like
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
  • reply
  • like
like-fill
1
  • reply
  • like

December 28, 2018 at 3:51pm
I'm in the process of converting a pretty large document from Sketch to Figma and I'm having this issue too. I have to realign every single text element but I can't find any simple way to do it accurately.
  • reply
  • like

December 29, 2018 at 6:46am

January 3, 2019 at 4:00am
They need to fix the reference link in that other thread.
  • reply
  • like

January 3, 2019 at 11:33am

March 26, 2019 at 4:50pm
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.)
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?
like-fill
1
  • reply
  • like
  • reply
  • like
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.
  • reply
  • like

April 3, 2019 at 11:19am

April 7, 2019 at 11:32am
I've modified some fontfiles to get the alignment right in Figma. Would be great if there was a way to shift the baseline of a font up or down for easy alignment directly in Figma.
  • reply
  • like