Skip to main content

Allow text line height to be defined by multiples

  • December 29, 2021
  • 3 replies
  • 2641 views
shaina

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

This topic has been closed for replies.

3 replies

Constantine_Zuev

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.

Lino_Ramirez

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:

developer.mozilla.org
shaina
Soren_Runge
2 people like this
  • shaina
    shaina
  • Soren_Runge
    Soren_Runge
A
  • Anonymous
  • 0 replies
  • February 28, 2022

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

Terms & ConditionsCookie settingsAccessibility statement

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