タイポグラフィトークンスケール — フォントサイズ、ウェイト、行の高さトークン

タイポグラフィトークンスケールの構築

タイポグラフィトークンは、タイプシステムを再利用可能な値にコード化します。よく構造化されたタイポグラフィスケールにより、すべてのコンポーネントとページで一貫したテキストレンダリングが保証されます。

フォントサイズスケール

モジュラースケールは、調和のとれたサイズを生成するために比率（一般的に1.25または1.333）を使用します：

:root {
  /* Major Third scale (1.25 ratio), base 16px */
  --typography-text-xs: 0.64rem;
  --typography-text-sm: 0.8rem;
  --typography-text-base: 1rem;
  --typography-text-lg: 1.25rem;
  --typography-text-xl: 1.563rem;
  --typography-text-2xl: 1.953rem;
  --typography-text-3xl: 2.441rem;
  --typography-text-4xl: 3.052rem;
}

フォントウェイトトークン

行の高さトークン

行の高さの値は通常、無単位の乗数です。

コンポジットタイプトークン

関連するプロパティをグループ化するコンポジットトークンを定義すると便利です。

レスポンシブタイポグラフィ

メディアクエリなしでビューポートサイズ間でスケールする流動的なフォントサイズにはclamp()を使用します。