Allow text line height to be defined by multiples

In CSS, line height can be defined by pixels, percentages, lengths values (e.g. ems) and unitless (which is multiples of the element’s font size). Figma supports only the first 2 today, but for alignment with code bases and design systems it would be nice to get unitless support as well. It is commonly used today since it’s the recommended code practice.

The current workaround is to enter an equation like 14*1.1 (instead 1.1) into the line height field, which calculates it in pixel values. But this would not be visible to Figma’s API or the development panel in the intended units.

Source: line-height - CSS: Cascading Style Sheets | MDN

1 Like

Unitless and em is technically just a value related to element font size (not length). Using it is the same as using percentage e.g. for 16 px font, 16 px = 100% = 1 em = 1; 8 px = 50% = 0.5 em = 0.5

It works and is convenient in CSS because you always have clear hierarchy: a child has parent element and the at top level which always has a default font. So you can build you style sheet and say “this element font has 75% size of its parent font” and browser calculates px for you.

In Firma (quite unfortunately) there is no nor any parent-child relationship between fonts styles. They are all separate, and all specified in px. On top of that Android and iOS support only dp/point values, so em is kinda meaningless outside CSS world.

I second this. We’re currently having the problem of our devs needing to convert line height manually to make it unitless.

It’s also an accessibility issue that I think deserves getting addressed:

4 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.