Typography

Token values as CSS custom properties.

{
  "reference_typeface": {
    "--md-ref-typeface-brand": "'Roboto'",
    "--md-ref-typeface-plain": "'Roboto'",
    "--md-ref-typeface-weight-regular": 400,
    "--md-ref-typeface-weight-medium": 500,
    "--md-ref-typeface-weight-bold": 700
  },
  "system_typescale": {
    "display": {
      "large": {
        "--md-sys-typescale-display-large-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-display-large-size": "57px",
        "--md-sys-typescale-display-large-line-height": "64px",
        "--md-sys-typescale-display-large-weight": 400,
        "--md-sys-typescale-display-large-tracking": "-0.25px"
      },
      "medium": {
        "--md-sys-typescale-display-medium-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-display-medium-size": "45px",
        "--md-sys-typescale-display-medium-line-height": "52px",
        "--md-sys-typescale-display-medium-weight": 400,
        "--md-sys-typescale-display-medium-tracking": "0px"
      },
      "small": {
        "--md-sys-typescale-display-small-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-display-small-size": "36px",
        "--md-sys-typescale-display-small-line-height": "44px",
        "--md-sys-typescale-display-small-weight": 400,
        "--md-sys-typescale-display-small-tracking": "0px"
      }
    },
    "headline": {
      "large": {
        "--md-sys-typescale-headline-large-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-headline-large-size": "32px",
        "--md-sys-typescale-headline-large-line-height": "40px",
        "--md-sys-typescale-headline-large-weight": 400,
        "--md-sys-typescale-headline-large-tracking": "0px"
      },
      "medium": {
        "--md-sys-typescale-headline-medium-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-headline-medium-size": "28px",
        "--md-sys-typescale-headline-medium-line-height": "36px",
        "--md-sys-typescale-headline-medium-weight": 400,
        "--md-sys-typescale-headline-medium-tracking": "0px"
      },
      "small": {
        "--md-sys-typescale-headline-small-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-headline-small-size": "24px",
        "--md-sys-typescale-headline-small-line-height": "32px",
        "--md-sys-typescale-headline-small-weight": 400,
        "--md-sys-typescale-headline-small-tracking": "0px"
      }
    },
    "title": {
      "large": {
        "--md-sys-typescale-title-large-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-title-large-size": "22px",
        "--md-sys-typescale-title-large-line-height": "28px",
        "--md-sys-typescale-title-large-weight": 400,
        "--md-sys-typescale-title-large-tracking": "0px"
      },
      "medium": {
        "--md-sys-typescale-title-medium-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-title-medium-size": "16px",
        "--md-sys-typescale-title-medium-line-height": "24px",
        "--md-sys-typescale-title-medium-weight": 500,
        "--md-sys-typescale-title-medium-tracking": "0.15px"
      },
      "small": {
        "--md-sys-typescale-title-small-font": "var(--md-ref-typeface-brand)",
        "--md-sys-typescale-title-small-size": "14px",
        "--md-sys-typescale-title-small-line-height": "20px",
        "--md-sys-typescale-title-small-weight": 500,
        "--md-sys-typescale-title-small-tracking": "0.1px"
      }
    },
    "body": {
      "large": {
        "--md-sys-typescale-body-large-font": "var(--md-ref-typeface-plain)",
        "--md-sys-typescale-body-large-size": "16px",
        "--md-sys-typescale-body-large-line-height": "24px",
        "--md-sys-typescale-body-large-weight": 400,
        "--md-sys-typescale-body-large-tracking": "0.5px"
      },
      "medium": {
        "--md-sys-typescale-body-medium-font": "var(--md-ref-typeface-plain)",
        "--md-sys-typescale-body-medium-size": "14px",
        "--md-sys-typescale-body-medium-line-height": "20px",
        "--md-sys-typescale-body-medium-weight": 400,
        "--md-sys-typescale-body-medium-tracking": "0.25px"
      },
      "small": {
        "--md-sys-typescale-body-small-font": "var(--md-ref-typeface-plain)",
        "--md-sys-typescale-body-small-size": "12px",
        "--md-sys-typescale-body-small-line-height": "16px",
        "--md-sys-typescale-body-small-weight": 400,
        "--md-sys-typescale-body-small-tracking": "0.4px"
      }
    },
    "label": {
      "large": {
        "--md-sys-typescale-label-large-font": "var(--md-ref-typeface-plain)",
        "--md-sys-typescale-label-large-size": "14px",
        "--md-sys-typescale-label-large-line-height": "20px",
        "--md-sys-typescale-label-large-weight": 500,
        "--md-sys-typescale-label-large-tracking": "0.1px"
      },
      "medium": {
        "--md-sys-typescale-label-medium-font": "var(--md-ref-typeface-plain)",
        "--md-sys-typescale-label-medium-size": "12px",
        "--md-sys-typescale-label-medium-line-height": "16px",
        "--md-sys-typescale-label-medium-weight": 500,
        "--md-sys-typescale-label-medium-tracking": "0.5px"
      },
      "small": {
        "--md-sys-typescale-label-small-font": "var(--md-ref-typeface-plain)",
        "--md-sys-typescale-label-small-size": "11px",
        "--md-sys-typescale-label-small-line-height": "16px",
        "--md-sys-typescale-label-small-weight": 500,
        "--md-sys-typescale-label-small-tracking": "0.5px"
      }
    }
  }
}