タイポグラフィ
文字サイズは H1〜H4（見出し）と Label1〜Label4（本文・補足・キャプション・極小）の8段階です。Discussion #63 で決めた抽象名スケール（xs〜4xl）への移行は今後の実装課題で、現行コードは意味ベースの名前（FontSizeVariant）を使っています。
行送り（line-height）はサイズごとに個別のpx値で固定しており、比率（tight / normal / relaxed）のトークン化はまだありません。フォントウェイトは Bold(700) から Light(300) までの5段階です。
src/styles/FontStyle.ts の FontSizeVariant / FontWeightVariant / FontFamily / getTextStyle() から自動生成しています。
| variant | font-size | line-height |
|---|---|---|
FontSizeVariant.H1 |
48px | 56px |
FontSizeVariant.H2 |
32px | 40px |
FontSizeVariant.H3 |
24px | 32px |
FontSizeVariant.H4 |
20px | 28px |
FontSizeVariant.Label1 |
16px | 24px |
FontSizeVariant.Label2 |
14px | 20px |
FontSizeVariant.Label3 |
12px | 18px |
FontSizeVariant.Label4 |
10px | 16px |
| weight | 値 |
|---|---|
FontWeightVariant.Bold |
700 |
FontWeightVariant.SemiBold |
600 |
FontWeightVariant.Medium |
500 |
FontWeightVariant.Regular |
400 |
FontWeightVariant.Light |
300 |
| family | font-family |
|---|---|
FontFamily.default |
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif |
FontFamily.serif |
Georgia, serif |
FontFamily.monospace |
'Courier New', monospace |
FontFamily.default を既定として使い、独自フォントの同梱は行いません（配布サイズと言語カバレッジのトレードオフのため）。serif / monospace は代替が必要な限定的な場面向けです。
- 見出し（H1〜H4）: ページ・セクション・カード・ダイアログのタイトルに使います。1画面内で使う段数は最大3段程度に抑え、視覚的な階層を壊さないようにします。
- 本文（Label1）: 16pxを本文の基準にします。フォームのラベルや説明文もここが既定です。
- 補足・キャプション（Label2〜Label4）: 注釈・カウンタ・タイムスタンプなど、本文より優先度の低い情報に使います。Label4（10px）はタップ領域を確保できる場面（Badge の数字など）に限定し、単体で読ませる長文には使いません。
- ウェイト: 見出しは
Bold/SemiBold、本文はRegular、強調したい語だけMediumを使います。太字を本文全体に使うと可読性が落ちるため避けます。
やってはいけないこと
Section titled “やってはいけないこと”font-size: 14pxのように px を直接書かない。getTextStyle(FontSizeVariant.Label2)かテーマ経由の値を使います。- 見出しに
Label系、本文にH系を流用しない（意味と見た目が分離すると、テーマ差し替え時に崩れます）。 - 行送りをフォントサイズ側で個別に上書きしない。
getTextStyle()が返すペアのまま使います。