CSS の font-weight とタグのどちらを使うべきですか？

言葉が重要なら、見た目を変えるだけのテキストには、ボタン、ラベル、見出しなどの視覚的なデザインには font-weight を使います。タグは意味を持ち、プロパティは見た目だけを表します。

実行できるCSSドキュメント: CSS 太字

Q: CSS で文字を太字にするには？

要素に font-weight: bold; か、同じ意味の数値 font-weight: 700; を指定します。見出しや の太字を解除するには font-weight: normal; (400) を指定します。

Q: font-weight の bold と 700 は同じですか？

同じです。bold は 700、normal は 400 として計算されるので、どちらの書き方でも表示は同じです。

Q: CSS の font-weight と タグのどちらを使うべきですか？

言葉が重要なら 、見た目を変えるだけのテキストには 、ボタン、ラベル、見出しなどの視覚的なデザインには font-weight を使います。タグは意味を持ち、プロパティは見た目だけを表します。

CSS で文字を太字にする方法

font-weight は文字の太さを指定します。bold (700 と同じ) で太字に、normal (400 と同じ) で標準の太さになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

見出し、<th>、、 はブラウザ自身のスタイルシートによって初期状態で太字になっているので、太字を解除するには font-weight: normal を使います。HTML で  と  をどう使い分けるかは HTML の太字を参照してください。

数値の段階: 100 から 900

数値には、フォントファミリーが従う標準の名前があります:

値	一般的な名前
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

1 から 1000 までのどの数値も有効なので、450 や 650 も書けます。違いが見えるかどうかはフォント次第です。ブラウザが描けるのは、フォントが実際に持っている太さだけです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui は OS のインターフェース用フォントで、ふつうは多くの太さを持っています。上のどの行も 2 種類の太さのどちらかにしか見えないなら、システムフォントが標準と太字しか持っていないということです。

太さを変えても見た目が変わらない理由

フォントはファイルの集まりで、太さごとに 1 ファイルのことがよくあります。指定した太さがないと、ブラウザは手持ちの中でいちばん近いものを選びます:

500 なら、500、次に細い太さ、次に太い太さの順に試します。
600 以上なら、先に太い太さ、次に細い太さを試します。
太字のファイルがまったくない場合、ほとんどのブラウザは標準の文字を太らせて疑似的な太字を作ります (合成ボールド)。

多くの太さを持つフォントと、ほとんどのシステムで標準と太字しか持たない serif を比べてみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

serif の列では、300 と 500 はふつう標準の書体に、600 は太字の書体になります。「font-weight が効かない」という質問のほとんどはこれが答えです。CSS は正しく、フォントにその太さがないのです。可変フォント (太さの軸を持つ 1 つのファイル) なら、その範囲内のあらゆる値をなめらかに描けます。

bolder と lighter

bolder と lighter は、要素が継承した太さに対する相対指定です。決まった量を足すのではなく、次の太さのグループに進みます:

親の太さ	`bolder` の結果	`lighter` の結果
100 から 349	400	100
350 から 549	700	100
550 から 749	900	400
750 から 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

実践的なパターン: 変数で太さの段階を決める

数値をあちこちに散らばらせず、サイト全体で 3 つか 4 つの太さを選んで名前を付けましょう:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

よくある間違い

どの数値でも見た目が違うと思う。 はっきり違って表示されるのは、フォントが持っている太さだけです。
ボタンのラベルに  を使う。 ボタンは font-weight でスタイルし、 と  はテキストに使いましょう。
数値を引用符で囲む。 font-weight: "700" は無効で無視されます。font-weight: 700 と書きます。
強調のためにあちこちを太字にする。 すべてが太字だと、何も目立ちません。本文は 400 のままにしましょう。
小さな文字に細い太さを使う。 小さいサイズの 100 から 300 は、特にコントラストの低い背景では読みにくくなります。

よくある質問

CSS で文字を太字にするには？

要素に font-weight: bold; か、同じ意味の数値 font-weight: 700; を指定します。見出しや  の太字を解除するには font-weight: normal; (400) を指定します。

font-weight にはどんな値がありますか？

1 から 1000 までの数値で、ふつうは 100 刻みで書きます。100 thin、200 extra light、300 light、400 normal、500 medium、600 semibold、700 bold、800 extra bold、900 black です。キーワードの normal と bold は 400 と 700 で、bolder と lighter は親に対する相対指定です。

font-weight の bold と 700 は同じですか？

同じです。bold は 700、normal は 400 として計算されるので、どちらの書き方でも表示は同じです。

font-weight の 500 や 600 が normal や bold と同じに見えるのはなぜですか？

フォントにその太さがないからです。フォントが 400 と 700 しか持っていないと、ブラウザはいちばん近いファイルを選ぶので、500 は 400 のように、600 は 700 のように表示されます。太さの種類が多いフォントか、可変フォントを読み込みましょう。

CSS の font-weight と タグのどちらを使うべきですか？

言葉が重要なら 、見た目を変えるだけのテキストには 、ボタン、ラベル、見出しなどの視覚的なデザインには font-weight を使います。タグは意味を持ち、プロパティは見た目だけを表します。