Skip to main content

Firstly great job Figma Font variables are here!!!



Figma tutorial: Variables for typography



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%).


image


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.

I would love this for Letter Spacing also.

IMO feature is not 100% viable until this is added. Frankly, I plan to put it’s use on hold until this is added.

+1! Need % for both line-height and letter-spacing!


image

%s are much scalable and lessens maintenance

How are you getting the letter-spacing to use percentages? It just converts to px for me.

Thanks for the feedback, @Slava_Bronevitskiy!


This is on our radar. I’ve moved your reply to this topic to better gauge the overall impact we’re seeing here in the community.

I was counting on using percentages for line height. All our text styles across 4 screen sizes would have needed just 4 line hight values.

Please add this soon 😉 it is so cumbersome to manage the line height with fixed values…

+1, needed !

+1 - count me in for the need of that feature 🙂

+1, percentages (%) for line-height and letter-spacing are a must have. Or even better, make line-height to support unitless values like 1.5 (equals 150%) as well, just like is best practice in CSS.

I was really hoping for this line-height to be a percentage. As it is implemented now with absolute numbers it makes it unusable / useless and the only element missing for typography variables. Kinda disappointed as percentage in line-height is the usual obvious implementation for developers.

Another +1 for percentages. Absolutely necessary for line height variables.

I’m shocked this is still not available. Definitely a must! 🙂

+1 for percentages.

Agree, 100%! Heheh, we need percentage-based line height.

Agree.



  • This could be made even more powerful, by allowing number fields to accept string vars (where a % could be entered) - kinda dirty, but this would solve the % feature (?)

  • Even more powerful if variables accepted calculations referring to other vars like =[line-height-default]*1.5

I totally agree with this.

+1 for this feature

Hi Figma, congratulations on reaching this milestone! It’s awe-inspiring. I wanted to share an idea regarding typography. Specifically, I’d like to talk about the text property. Instead of specifying the exact number of pixels for line height, I prefer using relative numbers like 1.5, 1.6, or 2. This approach offers more flexibility and maintaining consistency across different text easier.


However, I’m open to using exact pixel values when necessary.


image

This topic is already in discussion! Please vote for it 🙂 Allow percentages for line height

thanks @Franni

+1 for this feature 👍🏼

+1 for this feature, for line-height and letter-spacing. It’s not a scalable feature for design systems, as-is. Thanks for your work on this!

+1. this would be very helpful for a beginner like me 🥲

Reply


Terms & ConditionsCookie settings