タイポグラフィ
太さ（フォントウェイト）
Font Weight
太さとは、文字の線の太さのことで、サイズや色を変えずに情報の階層をつくれる強力な道具です。
定義
太さ（フォントウェイト）とは、文字の線の太さのことです。ふつうは100（いちばん細い）から 900（いちばん太い）までの数値で表され、400がふつう（regular）、700が太字（bold）として よく使われます。おもしろいのは、サイズや色をまったく変えなくても、太さを変えるだけで どの文字が重要なのかがすぐに伝わる点です。同じサイズ・同じ色の文のなかで、一語だけ太字に すると、その語が自然と先に目に入ります。線が太いほど画面のなかで占める視覚的な重みが大きく なるので、人の目は太いほうへ先に向かうからです。だから太さは、サイズや色を大きく変えずに 階層をつくれる、いちばん控えめで手軽な道具として選ばれます。
なぜ重要か
画面で強調をつくる方法は、サイズを大きくする、色を変える、太さを調整する、くらいしか ありません。このうちサイズを大きくするとレイアウトが押し出され、色を変えると意味が 変わったように見えたり、色のルールとぶつかったりします。いっぽう太さは場所をほとんど 取らずに強弱をはっきりさせるので、画面を揺らさずに階層を立てられます。見出しは太く、 本文はふつうに、補足の説明は少し細く置くだけで、情報の順序が自然と整います。色を 最小限に抑えたシンプルなデザインでは、この太さの良さがとくに際立ち、白黒だけでも じゅうぶん明快な画面をつくれます。また色覚に特性のある人にも太さの差はそのまま伝わる ので、色だけに頼らない強調の手段として、アクセシビリティの面でも心強い味方になります。
よくある間違い
- ひとつの画面で太さを混ぜすぎることです。細い文字、ふつう、太字、極太があちこちで 入り乱れると、どこが本当の強調なのかがぼやけて、せっかくの強調が力を失い、画面が 散らかって見えてしまいます。
- 小さい文字にとても細いウェイト（300以下）を使うことです。線の細い文字を小さく置くと、 解像度の低い画面や明るい背景ではかすれてつぶれ、とくに本文やラベルでは読みにくさが 目立ってしまいます。
- 本文ぜんぶを太字にすることです。すべてが太いと、いざ強調したい部分が消えて平坦になり、 長い文章では目が疲れやすく、かえって読みづらい画面になってしまいます。
実務のヒント
- 色やサイズには触れず、太さだけで強調をつくってみましょう。レイアウトを保ったまま 強弱だけを与えられるので、控えめなデザインにとくによく合います。ただし300のような 細いウェイトは大きな文字にだけ使ってください。小さく使うとかすれてしまいます。
- 実際に使う太さは二、三段階に絞りましょう。たとえば本文は400、強調と小見出しは600、 大きな見出しは700のように役割を決めておくと、画面に一貫性が出て管理もしやすくなります。
- 太さを変えるときは、そのフォントがその太さを実際にサポートしているか確認しましょう。 対応していない値はブラウザが無理にまねて（にせの太字）、つぶれた形になることがあります。
AIに頼む
下に貼り付けるCSS/JSXからfont-weightを全部探して、実際に使っている太さを2〜3段階に絞って — 本文は400、強調・小見出しは600、大見出しは700に役割を割り当てて、残りの値はその中で一番近い段階にマッピングして。300以下の細い太さが本文やラベルみたいな小さい文字に使われている箇所は、ぼやけて潰れるから400に上げて。各フォントが指定した太さを実際にサポートしているかも確認して、ブラウザが無理やり合成する偽ボールド（faux bold）のリスクがある箇所をマークして、元の値→新しい値のマッピング表と置き換え後のコードを一緒に出して。
下の段落で[強調する部分 — 例: 重要な数値・行動を促す文言]だけが真っ先に目に入るようにしたい。フォントサイズと色は絶対に変えないで、太さだけで強調を作って — 本文は400のままにして、強調する部分だけ600〜700に上げて。段落全体を太くすると肝心の強調が消えてしまうから、1段落あたり強調は1〜2箇所だけに絞って、どの単語をなぜ選んだかを1行で説明して。
このサービスは[サービスの性格 — 例: 情報密度の高い管理者ダッシュボード]。これに合うfont-weightの階層を設計して — 100〜900のスケールの中で実際に使う太さを2〜3段階だけ選んで、本文・強調/小見出し・大見出しに役割を割り当てて（例: 400/600/700）、それぞれを--fw-bodyのようなCSS変数として抜き出して。300以下の細い太さは大見出しでだけ許可して、本文には使わないで。選んだ太さが[使用フォント — 例: Pretendard]で実際に提供されている値かどうか確認して、各段階の用途と根拠を表で整理して。