---
title: "Typescale tokens"
description: "Every text style by level with a live specimen, its resolved metrics and the weight it takes when emphasized."
url: "https://tanrei.chnotchy.com/tokens/typescale/"
last_updated: 2026-10-23T17:33:05.000Z
---

# Typescale tokens

> Every text style by level with a live specimen, its resolved metrics and the weight it takes when emphasized.

Specimens are set with the generated CSS custom properties, so what you see is what `@tanrei/web` ships. Each role exposes its parts as separate properties: `-font-family`, `-font-size`, `-line-height`, `-font-weight`, `-letter-spacing` and `-font-weight-emphasized`, plus a `-font` shorthand. For guidance — which role an `h2` or a `p` is, and why emphasis is a weight rather than a role — read [Typography](https://tanrei.chnotchy.com/foundations/typography/).

## The sixteen roles

`body` 14px / 22px · 400 (emphasized 500) · 0

Clean, well-formed 端麗

`body-large` 16px / 26px · 400 (emphasized 500) · 0

Clean, well-formed 端麗

`body-small` 13px / 20px · 400 (emphasized 500) · +0.005em

Clean, well-formed 端麗

`caption` 11px / 16px · 500 (emphasized 600) · +0.02em

Clean, well-formed 端麗

`code` 13px / 20px · 400 (emphasized 500) · 0

const tanrei = 端麗;

`code-small` 12px / 16px · 400 (emphasized 500) · 0

const tanrei = 端麗;

`display` 48px / 52px · 450 (emphasized 550) · -0.04em

Clean, well-formed 端麗

`eyebrow` 12px / 16px · 500 (emphasized 600) · +0.08em

Design tokens

`heading-1` 32px / 40px · 500 (emphasized 600) · -0.03em

Clean, well-formed 端麗

`heading-2` 24px / 32px · 500 (emphasized 600) · -0.025em

Clean, well-formed 端麗

`heading-3` 20px / 28px · 500 (emphasized 600) · -0.02em

Clean, well-formed 端麗

`heading-4` 18px / 26px · 500 (emphasized 600) · -0.015em

Clean, well-formed 端麗

`heading-5` 16px / 24px · 500 (emphasized 600) · -0.01em

Clean, well-formed 端麗

`heading-6` 14px / 20px · 500 (emphasized 600) · 0

Clean, well-formed 端麗

`label` 14px / 20px · 500 (emphasized 600) · 0

Clean, well-formed 端麗

`label-small` 12px / 16px · 500 (emphasized 600) · +0.01em

Clean, well-formed 端麗

| Token | Family | Size | Line height | Weight | Emphasized weight | Tracking |
| --- | --- | --- | --- | --- | --- | --- |
| `--tanrei-sys-typescale-body` | Inter | 14px | 1.5714 | 400 | 500 | 0px |
| `--tanrei-sys-typescale-body-large` | Inter | 16px | 1.625 | 400 | 500 | 0px |
| `--tanrei-sys-typescale-body-small` | Inter | 13px | 1.5385 | 400 | 500 | 0.065px |
| `--tanrei-sys-typescale-caption` | Inter | 11px | 1.4545 | 500 | 600 | 0.22px |
| `--tanrei-sys-typescale-code` | Roboto Mono | 13px | 1.5385 | 400 | 500 | 0px |
| `--tanrei-sys-typescale-code-small` | Roboto Mono | 12px | 1.3333 | 400 | 500 | 0px |
| `--tanrei-sys-typescale-display` | Inter | 48px | 1.0833 | 450 | 550 | -1.92px |
| `--tanrei-sys-typescale-eyebrow` | Inter | 12px | 1.3333 | 500 | 600 | 0.96px |
| `--tanrei-sys-typescale-heading-1` | Inter | 32px | 1.25 | 500 | 600 | -0.96px |
| `--tanrei-sys-typescale-heading-2` | Inter | 24px | 1.3333 | 500 | 600 | -0.6px |
| `--tanrei-sys-typescale-heading-3` | Inter | 20px | 1.4 | 500 | 600 | -0.4px |
| `--tanrei-sys-typescale-heading-4` | Inter | 18px | 1.4444 | 500 | 600 | -0.27px |
| `--tanrei-sys-typescale-heading-5` | Inter | 16px | 1.5 | 500 | 600 | -0.16px |
| `--tanrei-sys-typescale-heading-6` | Inter | 14px | 1.4286 | 500 | 600 | 0px |
| `--tanrei-sys-typescale-label` | Inter | 14px | 1.4286 | 500 | 600 | 0px |
| `--tanrei-sys-typescale-label-small` | Inter | 12px | 1.3333 | 500 | 600 | 0.12px |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/typescale.tokens.json`

## Emphasis steps

Emphasized text is the role at its weight plus the step of its family. A role’s family is the first segment of its name; `caption`, `code`, `code-small` and `eyebrow` take the label step. The four steps, per shipped system:

| Design system | `emphasis.display` | `emphasis.heading` | `emphasis.body` | `emphasis.label` |
| --- | --- | --- | --- | --- |
| `tanrei` | 100 | 100 | 100 | 100 |
| `cupertino` | 100 | 200 | 200 | 200 |
| `m3-expressive-like` | 100 | 100 | 100 | 200 |
| `m3-like` | 100 | 100 | 100 | 200 |

Generated from `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`