プロダクト内は、ブランドフォントではなく OS 標準のフォントを使う。長文を読み続ける画面で可読性と表示速度を最優先するための、意図的な分岐（ブランドフォントの定義は How we look › Typography）。

書体

書体名を直接指定せず、「その環境の標準 UI フォント」を指す指定を使う。実際にはおおよそ次のように解決される。

環境	欧文	和文
macOS / iOS	San Francisco	ヒラギノ角ゴシック
Windows	Segoe UI	Yu Gothic UI
Android	Roboto	Noto Sans CJK JP

• この表は目安であって保証ではない。ユーザーがフォントを変更していれば結果は変わる
• したがって特定の書体でしか成立しない詰め方をしない。文字幅・行の高さに余裕を持たせ、和欧の字面の差で崩れない箱にする
• OS ごとに書体が変わる差は許容する。ブランドの一貫性は書体ではなく、色・レイアウト・言葉づかいが担う

タイプスケール

トークン	サイズ	行間	主な用途
text-xs	12px	1.375	注釈・メタ情報
text-sm	14px	1.375	補助テキスト・キャプション
text-base	16px	1.625	本文（長文を読む箇所）
text-md	16px	1.375	UI ラベル（ボタン・メニュー・タブ）
text-lg	18px	1.375	見出し 5
text-xl	20px	1.375	見出し 4・リード文
text-2xl	24px	1.375	見出し 3
text-3xl	30px	1.25	見出し 2
text-4xl	36px	1.25	見出し 1（ページタイトル）
text-5xl	48px	1.25	大画面でのページタイトル
text-6xl	60px	1.1	ディスプレイ表示
text-7xl	72px	1.1	ディスプレイ表示（最大）

このスケールの要は、同じ 16px に text-base と text-md の 2 つがあること。 長文を読ませる本文は行間を広く（1.625）、1〜2 行で完結する UI ラベルは詰める（1.375）。役割が違えば、同じサイズでも行間が違う。

見出しは大きくなるほど行間を詰める（30px 以上は 1.25、60px 以上は 1.1）。

見出しの組み方の実例

デザインシステムで定義している見出しスタイルの組み合わせ。

要素	組み合わせ
h1	text-4xl + font-extrabold + tracking-tight（大画面では text-5xl）
h2	text-3xl + font-semibold + 下線（border-b）
h3	text-2xl + font-semibold
h4	text-xl + font-semibold
h5	text-lg + font-semibold
h6	text-md + font-semibold
リード文	text-xl + text-muted
補足	text-sm + text-muted
インラインコード	text-sm + font-mono + bg-fill-muted

このページの表は寸法の定義。このサイト自体はブランドフォントで表示されるため、見た目のプレビューは Storybook を参照（公開準備中）。