Letter Spacing and Text Transform Tokens — Tracking and Case Styles

Letter Spacing and Text Transform Tokens

Letter spacing (tracking) and text transformation are often overlooked in token systems, leading to inconsistent heading styles and button text across components.

Letter Spacing Scale

:root {
  --typography-tracking-tighter: -0.05em;
  --typography-tracking-tight: -0.025em;
  --typography-tracking-normal: 0;
  --typography-tracking-wide: 0.025em;
  --typography-tracking-wider: 0.05em;
  --typography-tracking-widest: 0.1em;
}

Applying Tracking by Role

Different text roles benefit from different tracking values:

• Large headings (h1, h2): Tight tracking (-0.025em) looks more polished
• Body text: Normal tracking (0)
• Small caps / labels: Wider tracking (0.05em) improves readability
• Buttons: Slightly wider tracking (0.025em) for clarity

Text Transform Tokens

:root {
  --typography-transform-none: none;
  --typography-transform-uppercase: uppercase;
  --typography-transform-lowercase: lowercase;
  --typography-transform-capitalize: capitalize;
}

Composite Tokens

Combine tracking and transform for common patterns:

{
  "typography": {
    "label-style": {
      "letter-spacing": "0.05em",
      "text-transform": "uppercase",
      "font-weight": "600",
      "font-size": "0.75rem"
    },
    "heading-style": {
      "letter-spacing": "-0.025em",
      "text-transform": "none",
      "font-weight": "700"
    }
  }
}

Platform Considerations

Mobile platforms may need different tracking values than web. In your token file, you can express platform-specific overrides that Style Dictionary transforms into the correct format for each target.