Line Height | Tokens Studio for Figma

Last updated 5 months ago

Was this helpful?

Line Height - Token Type

Line Height Tokens define the vertical distance of each line of text (related to its font size) as an individual property to be composed within a . It is not intended to be applied to text elements directly.

Design decisions

Line Height, also known as leading, defines the vertical distance of each line of text.

Line Height decisions are typically used to enhance the readability of text.

For example, it's common to use a larger Line Height value for long-form text than a short headline to make paragraphs easier to read.

When we apply a Typography Composite Token to a text layer in Figma, these Line Height values will change the text layer:

No changes to the Line Height - normal
- By default, the system uses the value determined by the typeface it is pared with
- Example 200%
  - Line Height will be twice as large as the font size no matter what the Font size is
Responsive - value in rem
- Example 2rem
  - A person with a webpage zoomed in will see this Line Height remain twice as large as a font size set at 1rem
Fixed - value in px
- Example 32px
  - Line Height will remain the same even when the Font size changes or the user tries to modify the text using system accessibility features.

Possible values

Like all Tokens defining a dimension design decision, the value of a Line Height Token must include a numeric value and, ideally, a unit of measure.

Tokens without a unit specified are applied as the pixel equivalent in Figma.

Unless you are choosing to use the "default" value defined by the Font Family, which is commonly referred to as the normal value.

For Line Height Tokens, math might be used to ensure that the bounding box for your text elements always sits on a 4/8 pixel grid.

normal (AUTO)

Figma supports the equivalent of the normal Value in CSS (Figma has this as AUTO).

To write your Line Height Token with this value, it needs to match the following text string, which is case sensitive:

normal

However, if you are Exporting your Typography Tokens to Figma as Styles with Variable references, Figma does not support this string value.

Hard-coded numeric values

The syntax used to write numeric values for the Letter Spacing property is important.

Be sure to avoid any spaces between numbers and units of measurement.
Units are always written in lowercase.
Value should always be greater than 0.

Figma allows values less than 0

Line Height Values less than 0 are not widely supported in CSS and other programming languages. So, while you can enter negative values in the plugin that will communicate with Figma, we don't suggest this without consulting with your engineering team.

Percentage units (%)

To scale the Line Height relative to Font Size the Token value will be defined with a percentage to match Figma's unique approach to typography.

When the Typography Composite Token is applied, the Plugin will apply the percentage as a multiplier of the Font Size.

This is different from the way we would define this relationship in code. In CSS, we might enter this as a unitless number, which Figma does not support as unitless numbers in Figma as assumed to be pixels.

Rem units (rem)

While its not common, you can define your Line Height Token in rem units, and the Plugin automatically converts the value to the pixel equivalent when the Typography Composite Token is applied to the text element in Figma.

For example, a Line Height Token with a value of 1rem, when applied as a Typography Composite Token, will appear as 16px in Figma.

pixels (px)

While its not common, should you require the line height to remain static even when users change their preferences, the Line Height value can be defined in pixel units. For example:

20px

Be mindful that the fixed value in pixels means the Line Height property is no longer related to the Font Size in the Typography Composite Token. If you change the Font Size, you'll also need to change the Line Height value.

Units not supported by Figma

length in cm, pt, etc
additional text-strings
- initial - sets the property to default value
- inherit - parent element determines the value

You can still create Line Height Tokens with these units using the Tokens Studio plugin.

When you apply them to design elements in Figma, the Token will be present and visible to engineers inspecting the design element in Figma, but the Token won't interact with the Line Height property in Figma's UI.

It will be up to the engineers working to transform the design Tokens in Style Dictionary if they want to transform the values as you've entered them or change them in some way.

Values that reference another Token

When trying to reference another Token as the Value for a Line Height Token, you will seeyou will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = lineHeights
- dimension
- number

W3C DTCG Token Format

Line Height is not yet an official dedicated Token type in the W3C Design Token Community Group specifications.

"The vertical spacing between lines of typography. The value of this property MUST be a valid number value or a reference to a number Token. The number SHOULD be interpreted as a multiplier of the fontSize." - 9.7. Typography

However, Figma doesn't support a unitless number that behaves as a multiplier; it interprets a unitless number as an exact value in pixels.

Token Type syntax

In Tokens Studio, the Line Height Token has a unique syntax in code which identifies if the Token is:

An independent property Token
Part of a Typography Composite Token

Looking at the JSON format, the "type" is written in plural "lineHeights" when the Font Size Token is defined as an independent property Token.

This example shows a Line Height property Token named line-height-classic with the value in percentage (see line 4).

{
  "line-height-classic": {
    "value": "100%",
    "type": "lineHeights"
  }
}

This is in contrast to the Typography Composite Token, which has the property Token "type" written in the singular "lineHeight".

This example shows a Typography Composite Token with the Font Weight property Token named line-height-classic referenced as the value (see line 6).

{
  "paragraph-3": {
    "value": {
      "fontFamily": "{font-family-sans}",
      "fontWeight": "{font-weight-default}",
      "lineHeight": "{line-height-classic}",
      "fontSize": "{font-size-small}",
      "letterSpacing": "{letter-spacing-tight}",
      "paragraphSpacing": "{paragraphSpacing.none}"
      "paragraphIndent": "{paragraphIndent.none}"
      "textCase": "{textCase.none}",
      "textDecoration": "{textDecoration.none}"
    },
    "type": "typography"
  }
}

Transforming Tokens

When transforming Line Height Tokens, there are specific configurations to be aware of.

Token Values entered with math equations need to be checked and resolved.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of lineHeights to align with the DTCG Format Token Type of lineHeight.

Line Height Tokens, as part of Typography Composite Tokens, requires the SD-Transforms option to expand composite Tokens into multiple Tokens.