フォントファミリートークン — システム、ブランド、コードフォントスタック

フォントファミリートークンのデザイン

フォントファミリートークンは、アプリケーション全体で使用される書体を定義します。よく構造化されたフォントトークンシステムはフォールバックを適切に処理し、フォントの変更を簡単にします。

コアフォントカテゴリ

ほとんどのデザインシステムには3つのフォントファミリートークンが必要です：

:root {
  --typography-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --typography-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --typography-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

システムフォントスタック

パフォーマンスのためにシステムフォントを好む場合のスタック定義。

ブランドフォントトークン

ブランド体験のために、ブランドフォントをフォールバックチェーンから分離します。

フォント読み込みの考慮事項

フォントトークンは読み込み状態を考慮する必要があります。font-display: swapまたはoptionalを使用し、フォールバックフォントのメトリクスが類似していることを確認して、レイアウトシフトを防止します。