font-weight

文字の太さ・重みを決めるプロパティ。細い文字から太い文字まで切り替え、読みやすさや強調の変化を確かめられます。

遊んでみよう

同じ文字で線の太さを比較

Aa見てわかるCSS

400

CSS

.element font-weight: 400;

値のパターン

文字の太さ font-weight400

font-weightの構成要素

01normal | bold

基本のキーワード

normalは400、boldは700と同じ太さを表す、覚えやすいキーワードです。

02<number>

数値で指定する太さ

1から1000までの数値を指定できます。一般的には100刻みで、値が大きいほど太い重みを表します。

03lighter | bolder

親要素に対する太さ

親から継承した太さを基準に、lighterは一段階細く、bolderは一段階太くします。

早見表

初期値はnormal（400）で、子要素へ継承されます。よく使う5段階を比べます。

01100とても細いThin

02300細めLight

03400標準の太さnormal・初期値

04700太字bold

05900とても太いBlack

よくある使い方

見出しをはっきり強調する

本文より太い重みを見出しへ指定すると、情報のまとまりと読む順番を伝えやすくなります。

h2 { font-weight: 700; }

補助情報を軽く見せる

日付や注釈などの補助情報は、文字色や大きさとのバランスを見ながら少し細い重みにできます。

.meta { font-weight: 300; }

可変フォントを細かく調整する

対応する可変フォントでは100刻み以外も使え、見出しと本文の間に細かな強弱を付けられます。

font-weight: 650;

ポイント

指定した太さが、必ずそのまま表示されるとは限らない。

実際の見え方はfont-familyが用意している太さに依存します。指定した重みがないフォントでは、ブラウザーが近い太さへ置き換えます。100や200の細い文字は、サイズや文字色によって読みづらくなるため、本文では十分なコントラストを確認します。font-weightはすべての要素とテキストに適用でき、子要素へ継承されます。