Typography Token Scale — Font Size, Weight, and Line Height Tokens

Building a Typography Token Scale

Typography tokens codify your type system into reusable values. A well-structured typography scale ensures consistent text rendering across every component and page.

Font Size Scale

A modular scale uses a ratio (commonly 1.25 or 1.333) to generate harmonious sizes:

:root {
  /* Major Third scale (1.25 ratio), base 16px */
  --typography-text-xs: 0.64rem;     /* 10.24px */
  --typography-text-sm: 0.8rem;      /* 12.8px */
  --typography-text-base: 1rem;      /* 16px */
  --typography-text-lg: 1.25rem;     /* 20px */
  --typography-text-xl: 1.563rem;    /* 25px */
  --typography-text-2xl: 1.953rem;   /* 31.25px */
  --typography-text-3xl: 2.441rem;   /* 39px */
  --typography-text-4xl: 3.052rem;   /* 48.8px */
}

Font Weight Tokens

:root {
  --typography-weight-light: 300;
  --typography-weight-regular: 400;
  --typography-weight-medium: 500;
  --typography-weight-semibold: 600;
  --typography-weight-bold: 700;
}

Line Height Tokens

Line height values are typically unitless multipliers:

:root {
  --typography-leading-none: 1;
  --typography-leading-tight: 1.25;
  --typography-leading-snug: 1.375;
  --typography-leading-normal: 1.5;
  --typography-leading-relaxed: 1.625;
  --typography-leading-loose: 2;
}

Composite Type Tokens

For convenience, define composite tokens that group related properties:

{
  "typography": {
    "heading-1": {
      "font-size": "3.052rem",
      "font-weight": "700",
      "line-height": "1.1",
      "letter-spacing": "-0.02em"
    },
    "body": {
      "font-size": "1rem",
      "font-weight": "400",
      "line-height": "1.5",
      "letter-spacing": "0"
    }
  }
}

Responsive Typography

Use clamp() for fluid font sizes that scale between viewport sizes without media queries.