Typography

Typography tokens define one single text style, such as 12px bold Lato, 150% line spacing.

Example Token Payload

This is what the typography payload looks like:

{
  "id": string
  "name": string
  "description": string
  "tokenType": "Typography"
  "origin": ItemOrigin | null
  "value": {
    "font": {
      "family": string,
      "subfamily": string
      "referencedToken": Font | null
    },
    "fontSize": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "letterSpacing": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "lineHeight": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "paragraphIndent": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "textDecoration": "None" | "Underline" | "Strikethrough"
    "textCase": "Original" | "Upper" | "Lower" | "Camel"
    "referencedToken": Typography | null
  }
}

Associated functions

You can use the following functions to retrieve typography tokens from your design system:

• @ds.allTokens

• @ds.tokensByType (with "Typography") attribute

• @ds.tokensByGroupId