Skip to main content

Allow percentages for line height


Mark_McIntyre

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.

132 replies

Jonathan_Zazula

Is there a way to use % based line heights with Figma variables?


Patrick_Sobrak-Seaton

Seconded! This would be very helpful!


Seth_Bowers

1000% Second! - best practice on the code side is unitless numbers. Which we translate to percent in Figma. (1.5 = 150%)


Christian_Klose

I just asked myself the exact same question. It seems that it does not work - very sad!


Equinusocio

The native typography variable has different issues that make it another half-implemented feature.

  • We can’t use variables inside line-height since we can’t use % values (only numeric variables work on that field, so no % allowed)
  • Another big issue for us is that we can’t hide typography values inside other non-typography-related fields. Or, in other words, we can’t show typography variables only for text’s fields since the option is not present inside the list:
    CleanShot 2024-04-17 at 18.52.39

Barry_McMillan3

Agreed, we need percentage based line-height


lukeratc
  • 10 replies
  • April 18, 2024

+1 from me for percentages and for enabling formula.


pietrogregorini

I totally agree, using a single number is neither used in code, most of the time it translates in 1.5 for example.


Marcus_Scheller

Much needed.


Kenneth_vest_Knudsen

+1 (million) from me! once i read the news i expected this to be shipped with % support


Richard_Whitner

Definitely needed. Don’t particularly care about the format (eg. 1.5 vs 150%)


Franni
  • 18 replies
  • April 19, 2024

YES! Just working on that and I’m so confused they forgot about that…


Slava_Bronevitskiy

This release is awesome, but doesn’t work as intended for line height when expressed in % (not sure about others, but along my whole career this was the only useful and the only used unit).

Is there any chance this feature will get a follow-up to make it complete?


💯 This would be really helpful!

Expansion on Why It Would Be Helpful

I’m a Product Designer working closely with developers to update our hard-coded UI using a design system.

  1. Emulating our design system’s code structure is such a boone for design-dev synergy. Using variables in Figma has brought me closer to parity with the system, improving efficiency and collaboration.

  2. Variables help me evaluate the effectiveness of our design system structure and identify areas for improvement. I enjoy using variables for the same reasons devs do — fixed values result in a lot inefficiencies when you are working with a complex UX.

  3. Using pixels makes line-height values dependent on font size result in numerous variables to maintain consistency. Using percentages would streamline this process and allow for more flexible adjustments based on context.

I have 7 font-sizes within my system. Then, I have 3 stylistic choices for line-height for each of them (tight, base, loose) that can be chosen based on what’s needed in-context. If I am using px, this would result in about 21 variables to cover my whole system. If I ever wanted to update my font-sizes: I would need to update all the applicable line-height variables. Percentages allow for me to have just 3 variables — and these variables would not need to be updated if I were to update my font-sizes.

  1. The line-heights are specifically important to me because they are now the only Core Token in my design system that I can’t use my Figma variable system for 😭

Jannis1
  • 4 replies
  • April 20, 2024

Great new features but this is 100% (Badum tss) missing!


Ivan_Khoma

yes, please


Manu_Garzaron

Yes, please 🙂


Julia_Mnizhek
  • New Participant
  • 15 replies
  • April 22, 2024

Much needed in my team too 🙏


Ross_Gehm
  • 3 replies
  • April 22, 2024

I’ll add that this would be very helpful. Percentages all the way!


Nathan_Peters

Agree this would be super helpful!

If the Figma team wants to avoid adding units or percentages into the variable itself, maybe there could be a select dropdown beside the line-height field (or letter-spacing field) that lets you select from px and %.


Elias_Tinchon

+1 this is absolutely necessary!


Joe_Mallory-Skinner1

So true.

Annoyingly, when using a number variable for letterspacing it changes from % to px…


taras-stoliar
  • New Participant
  • 13 replies
  • April 23, 2024

Feature is there! But halfway done. Not using cause of missing % values. Please implement it! +1 here


Ole-Marius_privat

+1 here as well. Very much needed. Frankly puzzled that this is not implemented from get go.


I would love being able to use unitless numbers as well. Then the exported variables will match the required format in code.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings