Typography

typography is a composite token that exports to a Figma text style. The other types of the group are its parts: some become variables, others are applied to text layers directly.

In the Export to Figma window text styles are enabled by the Styles → Typography switch, string variables by Variables → String, numeric ones by Variables → Number.

#Typography

A composite object. Every key is optional and may be a value or a reference to a token of its type. References become variable bindings inside the text style.

Mind the line height: a unitless number such as 1.5 becomes a percentage in Figma, and a string with px a pixel value. The spelling "150%" is converted to pixels through the remBase base size, so for a percentage line height write the multiplier 1.5. The values auto and normal give automatic height.

Keys missing from the object are reset to Figma defaults on export, and a value written as a number instead of a reference removes a manual variable binding in the style.

{
  "$type": "typography",
  "$value": {
    "fontFamily": "{fontFamily.sans}",
    "fontWeight": "{fontWeight.medium}",
    "fontSize": "{fontSize.body}",
    "lineHeight": 1.5,
    "letterSpacing": "0px"
  }
}

The Create Typography form shows four main fields: Font Family, Font Weight, Font Size and Line Height. The rest are added with Add optional: Letter Spacing, Text Case, Text Decoration, Paragraph Spacing, Paragraph Indent and the Vertical Trim checkbox.

On Apply Tokens to a text layer the plugin first looks for an exported text style with that name and applies it; if there is no style, it sets the font, size and other properties directly.

#Font Family

A String variable. From a comma-separated family list the first one goes into the variable.

{ "fontFamily": { "$type": "fontFamily", "sans": { "$value": "Inter" }, "mono": { "$value": "JetBrains Mono" } } }

#Font Weight

A String variable with the Font style scope, because Figma stores the face as a string such as "Semi Bold". The value can be a number, a face name or a number with italic.

{ "fontWeight": { "$type": "fontWeight", "regular": { "$value": 400 }, "medium": { "$value": 500 }, "bold": { "$value": 700 } } }

If a fontWeight group has anything other than Font style in figma.scopes, the file shows a validation error: fix the scope in the token form or in JSON.

#Font Size

A Number variable with the Font size scope.

{ "fontSize": { "$type": "fontSize", "body": { "$value": "16px" }, "h1": { "$value": "32px" } } }

#Line Height

A Number variable with the Line height scope. Write pixels: the variable stores a number, and percentages for a standalone variable are converted through remBase.

{ "lineHeight": { "$type": "lineHeight", "tight": { "$value": "20px" }, "normal": { "$value": "24px" } } }

#Letter Spacing

A Number variable with the Letter spacing scope. Write pixels for the variable.

{ "letterSpacing": { "$type": "letterSpacing", "tight": { "$value": "-0.2px" }, "wide": { "$value": "0.5px" } } }

#Paragraph Spacing and Paragraph Indent

Number variables with the Paragraph spacing and Paragraph indent scopes.

{
  "paragraphSpacing": { "$type": "paragraphSpacing", "md": { "$value": "12px" } },
  "paragraphIndent": { "$type": "paragraphIndent", "md": { "$value": "8px" } }
}

#Text Case

Applied to a text layer directly. Values: none, uppercase, lowercase, capitalize, small-caps. If the font has no small caps, the layer keeps its original case.

{ "textCase": { "$type": "textCase", "upper": { "$value": "uppercase" }, "title": { "$value": "capitalize" } } }

#Text Decoration

Applied to a text layer directly. Values: none, underline, strikethrough.

{ "textDecoration": { "$type": "textDecoration", "underline": { "$value": "underline" }, "strike": { "$value": "strikethrough" } } }

#Font Style

The type is supported in JSON, but in the current version it is hidden from the create menu and is not applied to layers. Set italic with the fontStyle key inside typography or through the face in fontWeight, for example "600 italic".

#Full example

{
  "fontFamily": { "$type": "fontFamily", "sans": { "$value": "Inter" } },
  "fontWeight": { "$type": "fontWeight", "regular": { "$value": 400 }, "medium": { "$value": 500 } },
  "fontSize": { "$type": "fontSize", "body": { "$value": "16px" }, "h1": { "$value": "32px" } },
  "typography": {
    "$type": "typography",
    "body": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.regular}", "fontSize": "{fontSize.body}", "lineHeight": 1.5 }
    },
    "h1": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.medium}", "fontSize": "{fontSize.h1}", "lineHeight": "40px", "letterSpacing": "-0.5px" }
    }
  }
}

#Related pages

• Token types
• Token JSON format
• Scopes and Code Syntax
• Dimension, Number, Sizing, Spacing