$type: "typography" composite

Typography Token

Typography is a composite token that groups all properties needed to fully describe a text style. The $value is an object containing fontFamily, fontSize (dimension), fontWeight, letterSpacing (dimension), and lineHeight. This bundles the complete set of CSS text properties into a single reusable token — avoiding the need to reference five separate tokens whenever a text style is applied.

Value Format

A composite object with fontFamily, fontSize, fontWeight, letterSpacing, and lineHeight

Composite Fields

Field	Type	Required	Description
fontFamily	fontFamily	yes	The font family name or fallback list
fontSize	dimension	yes	The font size
fontWeight	fontWeight	yes	The font weight
letterSpacing	dimension	yes	Letter spacing (tracking)
lineHeight	number or dimension	yes	Line height multiplier or explicit value

When to Use

Use typography tokens to define your type scale — body/sm, body/md, heading/sm, heading/lg, code, caption, etc. Platform implementations can then map a single token reference to all required CSS properties, keeping typography consistent even as the design evolves.

Valid Example

Valid JSON .json

{
  "typography": {
    "body-md": {
      "$value": {
        "fontFamily": ["Inter", "sans-serif"],
        "fontSize": "16px",
        "fontWeight": 400,
        "letterSpacing": "0px",
        "lineHeight": 1.5
      },
      "$type": "typography",
      "$description": "Default body text"
    },
    "heading-lg": {
      "$value": {
        "fontFamily": ["Inter", "sans-serif"],
        "fontSize": "2rem",
        "fontWeight": 700,
        "letterSpacing": "-0.02em",
        "lineHeight": 1.2
      },
      "$type": "typography"
    }
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types