# UX4G Tokens — Typography

This page lists every primitive and semantic token for the **Typography** family.

- Primitive token source: `src/tokens/typography.tokens.css`
- Semantic token source: `src/semantic/typography.semantic.css`

## Primitive tokens

```css
/* FONT FACE */

:root {
  /* FONT FAMILY */
  --ux4g-font-family-base: "Noto Sans", system-ui, sans-serif;
  --ux4g-font-family-display: "Noto Sans Display", "Noto Sans", sans-serif;

  /* SIZE */
  --ux4g-size-8: 0.5rem;
  --ux4g-size-10: 0.625rem;
  --ux4g-size-11: 0.6875rem;
  --ux4g-size-12: 0.75rem;
  --ux4g-size-14: 0.875rem;
  --ux4g-size-16: 1rem;
  --ux4g-size-18: 1.125rem;
  --ux4g-size-20: 1.25rem;
  --ux4g-size-24: 1.5rem;
  --ux4g-size-28: 1.75rem;
  --ux4g-size-32: 2rem;
  --ux4g-size-36: 2.25rem;
  --ux4g-size-40: 2.5rem;
  --ux4g-size-48: 3rem;
  --ux4g-size-52: 3.25rem;
  --ux4g-size-56: 3.5rem;
  --ux4g-size-60: 3.75rem;
  --ux4g-size-64: 4rem;
  --ux4g-size-80: 5rem;
  --ux4g-size-120: 7.5rem;

  /* LINE HEIGHT */
  --ux4g-line-height-80: 5rem;
  /* 80px */
  --ux4g-line-height-72: 4.5rem;
  /* 72px */
  --ux4g-line-height-52: 3.25rem;
  /* 52px */
  --ux4g-line-height-44: 2.75rem;
  /* 44px */
  --ux4g-line-height-36: 2.25rem;
  /* 36px */
  --ux4g-line-height-32: 2rem;
  /* 32px */
  --ux4g-line-height-28: 1.75rem;
  /* 28px */
  --ux4g-line-height-24: 1.5rem;
  /* 24px */
  --ux4g-line-height-20: 1.25rem;
  /* 20px */
  --ux4g-line-height-18: 1.125rem;
  /* 18px */
  --ux4g-line-height-16: 1rem;
  /* 16px */
  --ux4g-line-height-14: 0.875rem;
  /* 14px */

  /* FONT WEIGHT */
  --ux4g-font-weight-regular: 400;
  --ux4g-font-weight-medium: 500;
  --ux4g-font-weight-semibold: 600;
  --ux4g-font-weight-bold: 700;
  /* Display variants (if using Noto Sans Display) */
  --ux4g-font-weight-display-semibold: 600;
  --ux4g-font-weight-display-bold: 700;

  /* Text Align */
  --ux4g-text-align-start: left;
  --ux4g-text-align-center: center;
  --ux4g-text-align-end: right;

  /* Text Transform */
  --ux4g-text-transform-lowercase: lowercase;
  --ux4g-text-transform-uppercase: uppercase;
  --ux4g-text-transform-capitalize: capitalize;

  /* Text Wrap */
  --ux4g-text-wrap: wrap;
  --ux4g-text-nowrap: nowrap;

  /* Word Break */
  --ux4g-word-break: break-word;

}
```

## Semantic tokens

```css
:root {
  /* font-size */
  --ux4g-fs-60: var(--ux4g-size-60);
  --ux4g-fs-52: var(--ux4g-size-52);
  --ux4g-fs-48: var(--ux4g-size-48);
  --ux4g-fs-40: var(--ux4g-size-40);
  --ux4g-fs-36: var(--ux4g-size-36);
  --ux4g-fs-32: var(--ux4g-size-32);
  --ux4g-fs-28: var(--ux4g-size-28);
  --ux4g-fs-24: var(--ux4g-size-24);
  --ux4g-fs-20: var(--ux4g-size-20);
  --ux4g-fs-18: var(--ux4g-size-18);
  --ux4g-fs-16: var(--ux4g-size-16);
  --ux4g-fs-14: var(--ux4g-size-14);
  --ux4g-fs-12: var(--ux4g-size-12);
  --ux4g-fs-11: var(--ux4g-size-11);
  --ux4g-fs-8: var(--ux4g-size-8);


  /* line height =========== */
  --ux4g-lh-80: var(--ux4g-line-height-80);
  --ux4g-lh-72: var(--ux4g-line-height-72);
  --ux4g-lh-52: var(--ux4g-line-height-52);
  --ux4g-lh-44: var(--ux4g-line-height-44);
  --ux4g-lh-36: var(--ux4g-line-height-36);
  --ux4g-lh-32: var(--ux4g-line-height-32);
  --ux4g-lh-28: var(--ux4g-line-height-28);
  --ux4g-lh-24: var(--ux4g-line-height-24);
  --ux4g-lh-20: var(--ux4g-line-height-20);
  --ux4g-lh-18: var(--ux4g-line-height-18);
  --ux4g-lh-16: var(--ux4g-line-height-16);
  --ux4g-lh-14: var(--ux4g-line-height-14);

  /* font-weight */
  --ux4g-fw-regular: var(--ux4g-font-weight-regular);
  --ux4g-fw-medium: var(--ux4g-font-weight-medium);
  --ux4g-fw-semibold: var(--ux4g-font-weight-semibold);
  --ux4g-fw-bold: var(--ux4g-font-weight-bold);
  --ux4g-fw-display-semibold: var(--ux4g-font-weight-display-semibold);
  --ux4g-fw-display-bold: var(--ux4g-font-weight-display-bold);

  /* font family */
  --ux4g-ff: var(--ux4g-font-family-base);
  --ux4g-ff-display: var(--ux4g-font-family-display);

  /* Semantic Text Align */
  --ux4g-ta-start: var(--ux4g-text-align-start);
  --ux4g-ta-center: var(--ux4g-text-align-center);
  --ux4g-ta-end: var(--ux4g-text-align-end);

  /* Semantic Transform */
  --ux4g-tt-lowercase: var(--ux4g-text-transform-lowercase);
  --ux4g-tt-uppercase: var(--ux4g-text-transform-uppercase);
  --ux4g-tt-capitalize: var(--ux4g-text-transform-capitalize);

  /* Semantic Wrap */
  --ux4g-tw-wrap: var(--ux4g-text-wrap);
  --ux4g-tw-nowrap: var(--ux4g-text-nowrap);

  /* Semantic Word Break */
  --ux4g-wb-break: var(--ux4g-word-break);

}
```

## Dark theme

Add `data-theme="dark"` to `<html>` or any ancestor to switch to the dark semantic token set.