Typography

A composite type combining fontFamily, dimension, and other properties to form a complete typographic style, as defined in 9.7.

JSON

{
  "bodyText": {
    "$type": "typography",
    "$value": {
      "fontFamily": ["Helvetica", "-system-ui", "sans-serif"],
      "fontSize": "1.5rem",
      "fontStyle": "normal",
      "fontWeight": 400,
      "letterSpacing": 0,
      "lineHeight": 1.5,
      "textTransform": "none"
    }
  }
}

YAML

bodyText:
  $type: typography
  $value:
    fontFamily:
      - Helvetica
      - -system-ui
      - sans-serif
    fontSize: 1.5rem
    fontStyle: normal
    fontWeight: 400
    letterSpacing: 0
    lineHeight: 1.5
    textTransform: none

Property	Type	Description
$type	string	Required. "typography"
$value	object	Required. Specify any typographic CSS properties in camelCase format. Although the spec limits the properties to only a few, Cobalt allows any valid attributes including letterSpacing, fontVariant, etc.
$description	string	(Optional) A description of this token and its intended usage.

Tips & recommendations

• Though the DTCG spec doesn’t technically allow it, declare any/all CSS typography properties on typography tokens. Without these, you couldn’t use things like variable font properties in your design system. Plugins may simply ignore properties that don’t apply for the given build target.