New Participant

Allow percentages for line height

Forum|Forum|2 years ago
April 17, 2024
197 replies
25150 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.

Show previous replies

Matthew_Ryan

Active Member

Another +1 for this. Our existing design system, which we are porting to Figma, exclusively uses percentages for line heights. With 11 line height options and 12 font size options, using variables for line height would require 132 distinct variables to be defined, and would be a major barrier to technical integration between our CSS and Figma component libraries.

Cassie11

New Participant

This is 100% needed, line-height and letter-spacing variables are essentially useless without string input allowing for percentage based values.

Shirley_Wang1

New Member

1000% needed!! Most of us are working with multiple font sizes switches or responsive resizing, the % would help out a lot rather than working out formula and creating multiple collections/library just to control font sizes.

Michal_Kucera

New Member

Needing this as well!

Matthew_Ryan

Active Member

I have been thinking about this some more and it seems like the fundamental issue is Figma’s insistence that number variables cannot have units, even though the attributes we can assign those units to may have units. It seems like a way for Figma to resolve this would be to create a new variable type called “units” or something like that, which would allow things like percentage, px, rem, etc.

Alternately, there is clearly some kind of parser that takes strings and converts them into numbers with units, which is what allows us to type in values with units into various fields in the interface. Perhaps instead Figma could allow strings in fields that take units, and the same parser would interpret the string into the value/unit.