視覚的階層のためのフォントウェイト — ボールドとレギュラーを超えて

階層ツールとしてのフォントウェイト

ほとんどの開発者は2つのウェイトのみを使用します：400（レギュラー）と700（ボールド）。しかし、モダンなバリアブルフォントは100から900の連続したウェイトスペクトルを提供し、はるかにニュアンスのある階層を可能にします。

ウェイトスペクトル

ウェイト	名前	一般的な用途
100	Thin	装飾的なディスプレイテキスト
200	Extra Light	大きなヒーロー見出し
300	Light	二次情報、キャプション
400	Regular	本文テキスト
500	Medium	強調された本文、ラベル
600	Semi Bold	サブ見出し、ボタン
700	Bold	主要な見出し
800	Extra Bold	ヒーローヘッドライン
900	Black	インパクトステートメント

ウェイトシステムの構築

プロジェクトに明確なウェイト階層を定義します：

:root {
  --font-weight-heading: 700;
  --font-weight-subheading: 600;
  --font-weight-body: 400;
  --font-weight-label: 500;
  --font-weight-caption: 300;
}

ウェイトとサイズの関係

重要な原則：サイズが大きくなるほど、ウェイトは小さくできます。ウェイト300の72px見出しは、ウェイト700の24px見出しと同じくらいの視覚的インパクトを持つことができます。

バリアブルフォントの利点

バリアブルフォントを使用すると、標準的な増分だけでなく、任意のウェイト値（例：450、550）を使用でき、階層の細かな制御が可能になります。