# Typography Tokens

All type primitives live in one family, `--tui-typography-*`, following the
system's token grammar: `--tui-{category}-{axis}-{step}` (see
[Naming](https://storybook-tangible-ui.pages.dev/docs/system-naming.md)).

## Size

The base size is `--tui-typography-size` (16px by default). The size steps
are calculated from pixel values via `--tui-typography-size-multiplier`,
whose default is `1rem / 16` — one pixel in `rem` units, so the steps output
consistent sizes regardless of the document root font size. Override the
multiplier to rescale the whole type ramp at once.

| Variable | Default Computed Size |
| - | - |
| `--tui-typography-size` | 16px (base) |
| `--tui-typography-size-xs` | 12px |
| `--tui-typography-size-sm` | 14px |
| `--tui-typography-size-md` | 16px |
| `--tui-typography-size-lg` | 20px |
| `--tui-typography-size-xl` | 24px |
| `--tui-typography-size-xxl` | 32px |

## Weight

One four-step scale, emitted on `.tui-interface`. Hosts can remap the
steps (e.g. to suit a variable font); components read them with value
fallbacks as indicated.

| Variable | Default | Recommended Usage |
| - | - | - |
| `--tui-typography-weight-normal` | 400 | `var(--tui-typography-weight-normal, 400)` |
| `--tui-typography-weight-medium` | 500 | `var(--tui-typography-weight-medium, 500)` |
| `--tui-typography-weight-semibold` | 600 | `var(--tui-typography-weight-semibold, 600)` |
| `--tui-typography-weight-bold` | 700 | `var(--tui-typography-weight-bold, 700)` |

## Line Height

The default line height is **1.4**. The tight step exists for compact
single-line UI text (tabs, segmented controls).

| Variable | Default | Used For |
| - | - | - |
| `--tui-typography-line-height` | 1.4 | Body and multi-line text |
| `--tui-typography-line-height-tight` | 1.25 | Compact single-line controls |

## Family and Color

| Variable | Default |
| - | - |
| `--tui-typography-color-base` | `currentColor` |
| `--tui-typography-color-contrast-high` | `var(--tui-color-fg)` |
| `--tui-typography-color-contrast-low` | `var(--tui-color-fg-muted)` |
| `--tui-typography-color-headings` | `var(--tui-color-fg)` |

## Renamed in 0.0.20

The old names below were removed in 0.0.20 — references with value fallbacks
kept identical computed styles, but the old names no longer respond to
overrides:

| Removed | Use Instead |
| - | - |
| `--tui-font-weight-medium` / `-semibold` | `--tui-typography-weight-medium` / `-semibold` |
| `--tui-font-size-base` | `--tui-typography-size` |
| `--tui-fontSize-multiplier` | `--tui-typography-size-multiplier` |
| `--tui-line` | `--tui-typography-line-height` |

## Font family

Font families are **knobs**: read with fallbacks, never declared on
`.tui-interface`. Unset, the interface keeps the host's font, so plugin
frontends inherit their theme's typeface.

| Knob | Fallback | Where it's read |
| - | - | - |
| `--tui-font-family-base` | `--tui-typography-font-family` (legacy alias), then `inherit` | `.tui-interface` |
| `--tui-font-family-sans` | system-ui stack | `.tui-font-sans` |
| `--tui-font-family-mono` | ui-monospace stack | `.tui-font-mono`, code-ish fields |

A page with no font of its own (it renders in the browser's serif) opts in
with a class, `<body class="tui-interface tui-font-sans">`, or sets the base
knob anywhere: `:root { --tui-font-family-base: Inter, system-ui, sans-serif; }`.

## Text styles

Named typographic treatments, applied by class. See
[Reference/Text Styles](https://storybook-tangible-ui.pages.dev/?path=/story/reference-text-styles--all-styles) for every
style rendered.

| Collection | Classes |
| - | - |
| Display | `.tui-text-style-display-01` to `-04` |
| Headline | `.tui-text-style-headline-01` to `-06` |
| Body and UI | `.tui-text-style-body`, `-body-sm`, `-label`, `-caption`, `-overline` |

**One class per style is the override hook.** Every TUI element using a style
renders its class, so one rule restyles it everywhere. The overline is the
group label in every listbox, the Dropdown header and the picker field labels:

```css
.tui-text-style-overline { text-transform: none; }
```

**Every property is also a knob,** never declared, so it works from `:root`:
`--tui-text-{style}-{family, size, weight, line-height, tracking, transform, color}`.
Display and headline levels also read a collection-wide knob (not for
`size`, which would flatten the scale), and a level knob beats it:

```css
:root {
  --tui-text-headline-weight: 700;      /* every headline level */
  --tui-text-headline-04-weight: 600;   /* just level 04 */
  --tui-text-overline-tracking: 0.12em;
}
```

Sizes are fixed rem values; for responsive type, re-point the size knobs
inside your own media or container queries. Colour defaults to `inherit`,
except caption and overline (`fg-muted`).

In SCSS, a component rule takes a style with
`@include sys.text-style(sys.$prefix, overline)` (or `headline, 4`) and also
renders the class. The mixin keeps static, CSS-only markup styled; the class
is the override hook.

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/tokens-typography--docs