CreaTools LogoCreaTools
Tech Notes
Font Preview

font-weightの数値と見た目｜太さを信用してはいけない理由

2025-11-12

:::note ※font-weightの数値で悩んでいる人向けの「判断用」記事です :::

結論（私の判断基準）

  • 使うウェイトは2種類で十分：400（本文）と 700（見出し）
  • 同じ数値でもフォントで見た目が違う：数値表を鵜呑みにしない
  • 迷ったら：400/700 の2種類に絞る。3種類以上は散らかる

💡 実際に試したい → Font Preview で目視確認

よくある失敗（私が実際にやった）

失敗1：数値を信じてフォントを変えた

游ゴシックで 700 を使っていた。Noto Sans JP に変えたら、同じ 700 でも太すぎて見出しが「重い」印象になった。

/* 同じ 700 でも印象が違う */
h1 {
  font-family: 'Yu Gothic', sans-serif;
  font-weight: 700; /* 上品 */
}

h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; /* やや重い */
}

フォントを変えたら、ウェイトをゼロから見直す。

失敗2：ウェイトを使いすぎた

「デザインシステムを作ろう」と思って、400/500/600/700 の4種類を定義した。

結果、どこでどのウェイトを使うか迷うようになり、サイト全体が散らかった印象になった。

今は 400/700 の2種類に絞っている。足りないと思ったことはない。

失敗3：フォントが持っていないウェイトを指定した

/* ❌ 游ゴシックは 500 を持っていない */
.subheading {
  font-family: 'Yu Gothic', sans-serif;
  font-weight: 500;
}

ブラウザが勝手に近いウェイト（400 か 700）を選ぶ。意図しない見た目になる。

使う前にフォントが持っているウェイトを確認する。

フォントによる見た目の違い

同じ数値でも、フォントで印象が全然違う。

フォント400 の印象700 の印象特徴
Noto Sans JPやや太めかなり太い視認性重視
游ゴシック細め標準的上品な印象
ヒラギノ角ゴ標準的やや太めMac標準

数値表を覚えても、フォントを変えたら全部変わる。

数値と名前の対応

参考として。ただし「覚える」より「試す」方が確実。

数値名前私の使い方
100Thin使わない
200Extra Light使わない
300Light稀にサブテキスト
400Regular本文（メイン）
500Medium小見出しで稀に
600Semi Bold使わない
700Bold見出し（メイン）
800Extra Bold使わない
900Black使わない

実務では 400 と 700 だけ使っている。500 を使うのは「400 では弱いが 700 では強すぎる」特殊なケースのみ。

対応していないウェイトの挙動

フォントが指定ウェイトを持っていない場合、ブラウザが近いウェイトを選ぶ。

指定: 600
↓
フォントが持つウェイト: 400, 700
↓
結果: 700 が適用される

これが「意図しない太さ」の原因。フォントが持っているウェイトを事前に確認する。

なぜ 400/700 に絞るのか

理由は3つ。

  1. 運用コスト：ウェイトが増えると「どこで何を使うか」の判断が増える。判断が増えるとミスが増える
  2. 可読性：本文は400、強調は700。これ以上の差は読者に伝わらない
  3. パフォーマンス：ウェイトが増えるとフォントファイルが増える。表示が遅くなる

私は運用コストを最優先している。デザインの幅より、迷わないことを選ぶ。

/* これで十分 */
body { font-weight: 400; }
h1, h2, h3 { font-weight: 700; }

3ウェイトが必要になるケース

/* 小見出しを差別化したい場合のみ */
body { font-weight: 400; }
.subheading { font-weight: 500; }
h1, h2 { font-weight: 700; }

ただし、これが必要になることは稀。

避けたいパターン

パターン問題
4種類以上のウェイト散らかった印象
100や200を本文に可読性低下
800や900を多用重苦しい印象

可変フォントの場合

可変フォントは 100〜900 の任意の値を指定可能。

/* 450 や 550 など中間値も使える */
.custom-weight {
  font-weight: 450;
}

ただし、「中間値が使える」からといって使う必要はない。400/700 で足りるなら、それでいい。

迷ったときの判断

迷い私の判断
何種類使うか2種類（400/700）
500 を使うか基本使わない
フォントを変えたウェイトをゼロから見直す

**迷ったら 400/700。**これで足りないケースはほとんどない。

この記事で解決しない場合

400/700 の2種類で足りないと思ったことはない。