Typography

A complete text style as one token.

Value format

{
  "$type": "typography",
  "$value": {
    "fontFamily": "Inter",
    "fontSize": { "value": 16, "unit": "px" },
    "fontWeight": 600,
    "lineHeight": 1.5,
    "letterSpacing": { "value": 0, "unit": "px" }
  }
}

Field	Value
fontFamily	A font family value or reference
fontSize	A dimension value or reference
fontWeight	A font weight value or reference
lineHeight	A number that multiplies the font size, or a reference. 1.5 at 16 px is 24 px
letterSpacing	A dimension value or reference

All five are required. The whole $value can also be a reference to another typography token.

Figma fields

Settings that DTCG has no field for are stored under eu.syntope.figma, so the file stays valid DTCG:

{
  "$type": "typography",
  "$value": {
    "fontFamily": "Inter",
    "fontSize": { "value": 16, "unit": "px" },
    "fontWeight": 500,
    "lineHeight": 1.5,
    "letterSpacing": { "value": 0, "unit": "px" }
  },
  "$extensions": {
    "eu.syntope.figma": {
      "fontStyle": "Medium Italic",
      "textCase": "UPPER",
      "paragraphSpacing": { "value": 16, "unit": "px" }
    }
  }
}

Key	Accepts
paragraphSpacing, paragraphIndent	A dimension
textDecoration	NONE, UNDERLINE, STRIKETHROUGH
textCase	ORIGINAL, UPPER, LOWER, TITLE, SMALL_CAPS, SMALL_CAPS_FORCED
fontStyle	The exact Figma face name, such as Medium Italic
lineHeight	{ "unit": "PIXELS", "value": 24 }, { "unit": "PERCENT", "value": 150 } or { "unit": "AUTO" }
letterSpacing	A percentage as text, such as "-2%"
keep	A list of $value fields to leave to the text layer

Each key can also hold a reference. textDecoration, textCase and fontStyle can refer to a string token. $value stays readable for other tools: the fallback numbers next to fontStyle, a fixed lineHeight and a percentage letterSpacing are refreshed when a file is written.

In Syntope Tokens

The dialog starts with one reference field. To enter values, select the link icon (Show typography fields). The fields are font family, font size, font weight, line height, letter spacing, paragraph spacing, paragraph indent, text decoration, font style and text case.

Field	Accepts
line height	1.5, 24px, 150%, AUTO, or a reference to a number or dimension token
letter spacing	0.5px, -2%, or a reference

Leave font family, font size, font weight, line height or letter spacing empty to keep the layer’s own value. At least one of these five must be filled.

Applying to layers

Apply token works on text layers and sets the whole layer, so mixed styles inside it are replaced. Use Figma’s undo if that was not intended.

The face is chosen like this:

1. If font style is set, only that exact face is used.
2. Otherwise the weight picks a face by the font weight table. Italic on the layer is not kept. To get italic, set font style, for example Medium Italic.
3. If fontFamily is a list, each name is tried in order until one loads.
4. If none loads, the layer stays unchanged and the plugin reports it. Choose a face the family has, or install the font.

rem values are multiplied by 16. Without a fixed value, the line height is set in pixels as fontSize × lineHeight. A font size below 1 is not applied.

A kept font family, weight or size needs one value on the layer. If the layer mixes fonts or sizes, the token is not applied. Fill the field in the token, or make the layer uniform first.

Figma variables

Variable sync leaves typography tokens out, because Figma has no composite variable type. Apply them to layers directly, or map their parts through separate tokens.