Skip to main content

Firstly great job Figma Font variables are here!!!



The only thing missing is the use of percentages in the line-height property.


You can not use a percentage in the line-height as it only accepts variables that are a number type.


Although the variables for line-height caters for pixel (absolute) line-heights (10,12,14)- it does not accommodate relative line heights.


In other words you can’t use percentage variables for line heights that are a percentage of the font size (100%, 120%,150%).



Interestingly …You can use a variable for letter-spacing ( which accepts a number variable - but reads it as a percentage) - the challenge remains that line heights by default are absolute not percentages - even though you can input a percentage.


Percentages allow greater flexibility and less calculations


Word around would be to allow formula in a variable

e.g. =.variable] * 1.5


Or figuring out a way for the line height to be toggle between absolute or relative application of the number variable.

Chiming in that this would be extremely valuable to my team.


Come on guys. This is a basic but needed feature!


This is very much needed and an oversight by Figma, please introduce relative units for line height! thanks.


+1! Needed here as well!



  • 1 - this is needed!


+1 Really need this feature!


+1 We need percentage line height plz


As devs, we always use relative units (eg: 150%, 1.5, or 1.5em) for line-height. It’s funny that till today, such a basic web typography property isn’t supported in Figma. Please get this in ASAP.


Upvoted! This would be really helpful as we use a percentage such as 125% for heading and 150% for body copy.


+1 Much needed for design system consistency between teams !


Yeah, at that point you are hurting yourself.


Just use a percentage value in the style and save the headache. Too much chance for error and waste of time maintaining tons of excess variables.


Until that works properly and supports percentage in the variable, my team has better things to do.


That is the same thing as just typing in a text value.


Sure, IF there was some way that the variable would apply your equation to the actual style setting field, then yes.


But here all you are doing is typing in a math problem.


You still have the same issue…you have a fixed value to update in each and every line height variable if you ever change the font size variable.


It would be fine IF the equation could be advanced enough to use the font size variable in the math probelm so it did not have to be manually manipulated in every lineheight variable.


Definitely need this.


Needed now now now now now


Currently working on a design system. It’s sad that this is not implemented yet. Makes me wonder how to contain line height in a variable that makes sense for our code department as well.


Year 2025, it’s not implemented yet.


Jumping on the bandwagon: we DEFINITELY need % -based line-height variables. This is like the n:o 1 use case I would have for these.


+1!


Very much needed. We have to work around this, which is quite frustrating.


 

Interestingly …You can use a variable for letter-spacing ( which accepts a number variable - but reads it as a percentage)

Just wanted to jump in here and say that this, at least at the time of writing, this statement is inaccurate. The default behavior for letter spacing defaults to px and not percentage. If you detach the variable in the type panel, you’ll see the unit default to px instead of %.

Detaching -2 shows unit default to px

 


Hi there! Just hit a wall on this same issue and wanted to add my +1 to it!

My expectation from the line-height field in Figma was for it to accept (at least some of the) values as in the CSS spec of the line-height property:

  • 1.25 = If defined with just a number, interpret it as multiplier of font size, which would allow us to declare it in variables as number
  • 125% = If defined with a percentage symbol, interpret as a multiplier of font size
  • 20px = If defined with px, interpret as a pixel constant

Fingers crossed the team sees this issue and prioritizes it!


+1, along with the rest!

 

I’m not hand-waving whatever technical hurdle this might be—but I’ll add that this seems like a real feature, solving a real problem, that real designers (real customers) want to work for their real systems on their real projects. (Unlike some… other things that seem to get the product attention, since this suggestion was raised!)

 


+1


Yes please! This feature is basic but really needed.


Wait, wait, wait. Have I just poured 2 days of work into converting a design system to use variables, only to find out that I can’t actually finish the task?


Reply