New Participant

Allow percentages for line height

Forum|Forum|2 years ago
April 17, 2024
197 replies
25137 views

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

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.

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

New Participant

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: