--- title: "タイプスケールトークン" description: "階層で名付けたすべてのテキストスタイル。実物の見本、解決済みの数値、強調したときの太さを示します。" url: "https://tanrei.chnotchy.com/ja/tokens/typescale/" last_updated: 2026-10-23T17:33:05.000Z --- # タイプスケールトークン > 階層で名付けたすべてのテキストスタイル。実物の見本、解決済みの数値、強調したときの太さを示します。 見本は、生成された CSS カスタムプロパティで組んでいます。ここに見えているものが、`@tanrei/web` が提供するものです。各ロールは、その構成要素を個別のプロパティとして公開しています。`-font-family`、`-font-size`、`-line-height`、`-font-weight`、`-letter-spacing`、`-font-weight-emphasized`、それにショートハンドの `-font` です。`h2` や `p` がどのロールにあたるのか、なぜ強調がロールではなく太さなのかといった指針は、[タイポグラフィ](https://tanrei.chnotchy.com/ja/foundations/typography/)を参照してください。 ## 16 のロール `body` 14px / 22px · 400 (強調時 500) · 0 端麗なインターフェース Tanrei `body-large` 16px / 26px · 400 (強調時 500) · 0 端麗なインターフェース Tanrei `body-small` 13px / 20px · 400 (強調時 500) · +0.005em 端麗なインターフェース Tanrei `caption` 11px / 16px · 500 (強調時 600) · +0.02em 端麗なインターフェース Tanrei `code` 13px / 20px · 400 (強調時 500) · 0 const tanrei = 端麗; `code-small` 12px / 16px · 400 (強調時 500) · 0 const tanrei = 端麗; `display` 48px / 52px · 450 (強調時 550) · -0.04em 端麗なインターフェース Tanrei `eyebrow` 12px / 16px · 500 (強調時 600) · +0.08em Design tokens `heading-1` 32px / 40px · 500 (強調時 600) · -0.03em 端麗なインターフェース Tanrei `heading-2` 24px / 32px · 500 (強調時 600) · -0.025em 端麗なインターフェース Tanrei `heading-3` 20px / 28px · 500 (強調時 600) · -0.02em 端麗なインターフェース Tanrei `heading-4` 18px / 26px · 500 (強調時 600) · -0.015em 端麗なインターフェース Tanrei `heading-5` 16px / 24px · 500 (強調時 600) · -0.01em 端麗なインターフェース Tanrei `heading-6` 14px / 20px · 500 (強調時 600) · 0 端麗なインターフェース Tanrei `label` 14px / 20px · 500 (強調時 600) · 0 端麗なインターフェース Tanrei `label-small` 12px / 16px · 500 (強調時 600) · +0.01em 端麗なインターフェース Tanrei | トークン | ファミリー | サイズ | 行の高さ | 太さ | 強調時の太さ | 字間 | | --- | --- | --- | --- | --- | --- | --- | | `--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 | 生成元 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/typescale.tokens.json` ## 強調のステップ 強調したテキストは、ロールを、その太さにファミリーのステップを足した太さで描いたものです。ロールのファミリーは、名前の最初の区切りです。`caption`、`code`、`code-small`、`eyebrow` はラベルのステップを取ります。同梱システムごとの 4 つのステップは次のとおりです。 | デザインシステム | `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 | 生成元 `tokens/systems/*.system.json`, `design/tokens//tanrei.light.tokens.json`