フォントの太さで階層を表現する方法
見出しと本文を区別する際、サイズだけを変えるより太さ(font-weight)も一緒に調整すると、より安定した視覚的階層を作れます。ただし400と500のように近い太さを並べて使うと、人の目ではほとんど差を感じられず階層の区別が曖昧になります。一般的に隣接する段階の間には100〜200以上の差をつけることで、はっきり区別できる太さのコントラストが生まれます。
このツールは本文に使う基本の太さと必要な階層の段階数を選ぶと、100単位の標準太さ値(100〜900)の中で均等に広がった組合せを推薦します。推薦された太さが使用中のフォントファミリーにない場合は、最も近い対応太さに置き換え、足りないコントラストは文字サイズや色で補うことをおすすめします。
よくある質問
太さの段階間にどれくらい差をつけるべき?
一般的に100〜200単位以上の差がないと、人間の目にははっきりした太さの違いとして認識されません。近すぎる太さは区別しにくくなります。
フォントにその太さがない場合はどうする?
使用中のフォントが対応している太さのリストを先に確認し、ない太さは最も近い対応太さに置き換えるか、サイズや色のコントラストで補うのがよいでしょう。