🔤フォントウェイト組み合わせガイド

見出しと本文のフォントウェイト組み合わせのコントラストを案内

フォントウェイト組み合わせガイドの使い方

見出しと本文のフォントウェイトを選択すると、コントラストスコアと組み合わせ評価をすぐに確認できます。見出しと本文のウェイト差が大きいほど視覚的ヒエラルキーが明確になります。

最もよく使われる組み合わせは見出し700(Bold)と本文400(Regular)です。ウェイト差が300以上は強いコントラスト、200は適度なコントラスト、100は弱いコントラストです。見出しが本文より細いとヒエラルキーが逆転して可読性が大きく低下します。

プレビューエリアで実際のフォントウェイトの見え方を確認できます。システムフォント基準のため、使用するフォントによって視覚的な差は異なる場合があります。

よくある質問

フォントに選択したウェイトがない場合は?

ブラウザが最も近いウェイトに自動的に置き換えます。例えばフォントが400と700しかない場合、600は700、300は400として表示されます。

最もよく使われる見出し・本文の組み合わせは?

見出し700+本文400の組み合わせが最も汎用的です。インパクトが必要なマーケティング素材では見出し800〜900+本文300〜400が使われます。

ウェイトの数値(100〜900)は何を意味しますか?

CSSのfont-weight値に対応しています。400がRegular、700がBoldです。数字が大きいほど太い文字になります。