フォントの「太さ（ウェイト）」を変えるだけで、デザインは劇的に変わる

フォントのウェイトとは

まずはウェイトという言葉の意味と、ツールやCSSで目にする名前・数値・W表記の読み方を押さえましょう。

ウェイトは文字の太さの段階

フォントのウェイト(Weight)とは、文字の線の太さの段階のことです。

多くのフォントは、同じデザインで太さだけが違う複数のフォントをひとまとめにした「フォントファミリー」として作られていて、その中の太さの違いをウェイトと呼びます。

ウェイトは「声のボリューム」にたとえると分かりやすくなります。

細い文字はささやき声、標準の文字は落ち着いた地声、太い文字は大きな呼びかけのように、同じ言葉でも太さによって受け取る印象が変わります。

※お使いの端末に該当する太さのフォントがない場合は、近い太さで表示されます

左のLightは繊細で静かな印象、右に進むほど力強く、右端のBlackは文字というより黒い塊のような存在感になります。

同じ「デザイン」という言葉でも、太さを変えるだけで伝わる声色が変わることが分かります。

フォントファミリーやフォントと書体の違いについては、フォントと書体の基本の記事で解説しています。

ウェイトの名前と数値(100〜900)

ウェイトには「Light」「Bold」のような名前と、「300」「700」のような数値の2通りの呼び方があります。

Webサイトの見た目を指定するCSSや、Figmaなどのデザインツールでは、100から900までの数値で太さを表すのが一般的です。

数値は大きいほど太く、単位はありません。

数値	主な名前	太さのイメージ
100	Thin(Hairline)	極細
200	Extra Light(Ultra Light)	極細〜細
300	Light	細
400	Regular(Normal)	標準。本文の基準
500	Medium	中
600	Semi Bold(Demi Bold)	やや太
700	Bold	太。一般的な太字の基準
800	Extra Bold(Ultra Bold)	極太
900	Black(Heavy)	最も太い

この対応は、フォントの規格であるOpenTypeの仕様にもとづくもので、MDNのfont-weightの解説にも同じ表が載っています。

まずは「400が標準、700が太字」の2つを覚えておけば十分です。

ただし、名前と実際の太さの関係はフォントごとに多少異なり、すべてのフォントが9段階をそろえているわけでもありません。

和文フォントの「W3」「W6」とは

日本語のフォントでは、「W3」「W6」のように、Wと数字でウェイトを表すものがあります。

WはWeight(ウェイト)の頭文字で、数字が大きいほど太くなります。

代表的なのがMacに搭載されているヒラギノ角ゴシックで、最も細いW0から最も太いW9まで10段階のウェイトがあります。

Macの標準的な組み合わせでは、本文にW3、太字にW6が使われることが多いので、「W3≒標準、W6≒太字」と覚えておくと便利です。

一方で、W表記を使わず「L(Light)」「R(Regular)」「B(Bold)」のような略号で表すフォントメーカーもあります。

W表記と数値(100〜900)の対応は決まっておらず、数字が似ていても「W6なら600」とは限らないので、迷ったら実際に文字を並べて太さを見比べましょう。

ウェイトによるメリハリとは

ウェイトによるメリハリとは、文字の大きさを変えずに、太さの違いだけで情報の強弱や重要度を表す考え方です。

文字サイズだけで強弱をつけようとすると、見出しが大きくなりすぎたり、逆に差が足りなかったりと、調整が難しくなりがちです。

太さを使えば、レイアウトの広さをほとんど変えずに、強調したい部分だけを目立たせられます。

左の見本はすべて同じ太さなので、どこが大事な情報かを読まないと判断できません。

右の見本では、時間と曜日だけを太くしたことで、文字サイズは同じでもひと目で必要な情報が拾えるようになっています。

大きさによる強弱(ジャンプ率)と太さによる強弱を組み合わせると、見出し・本文・補足のような何段階もの差を、無理なく作れるようになります。

フォントのウェイトの使い分け

ここからは、細い・標準・太いの3グループごとに、与える印象と得意な使いどころを見ていきます。

背景が濃いときの調整や、太さを細かく指定できるバリアブルフォントについても紹介します。

細いウェイト(Thin・Light):洗練・上品・繊細

細いウェイトは、大きなサイズで余白とともに使うと、上品で洗練された印象を作れます。

線が細いぶん主張が控えめで、静かに語りかけるような雰囲気になるためです。

化粧品やジュエリーのキャッチコピー、余白をたっぷりとったポスター、未来的なテーマの見出しなどでよく使われます。

同じ細いグループでも、Thinは「読ませる文字」より「見せる線」に近く、画面いっぱいの英語タイトルや写真に重ねるキャッチコピーのように、ごく大きく使う場面向けです。

Lightは文字としての骨格がしっかり残っているので、写真のキャプション(説明文)や、高級感を出したい中見出しのように、短い文章にも使えます。

標準ウェイト(Regular・Medium):読みやすさ・信頼感

標準ウェイトは、長い文章を読ませる本文の基本になる太さです。

細すぎず太すぎないため、長時間読んでも目立ちすぎず、内容そのものに集中してもらえるからです。

ブログやレポートの本文、契約書のように情報を正確に淡々と伝えたい文書に向いています。

Regularだと少し弱々しく、Boldだと強すぎると感じたときは、その中間のMediumを試してみましょう。

特にスマホの画面やスライドでRegularの線が細く感じるときは、Mediumにするだけで読みやすくなることがあります。

太いウェイト(Bold・Heavy・Black):力強さ・インパクト

太いウェイトは、見出しや強調したいキーワードなど、確実に目に留めてほしい部分に使います。

線が太く面積が大きいぶん、周りの文字よりも先に視線を集めるからです。

Boldは本文のRegularと組み合わせて使うことを想定した太さで、線と線のすき間がしっかり残っているため、短い文章なら読みやすさを保てます。

記事の見出し、本文中の重要な語句、短めのリード文などに向いています。

HeavyやBlackはさらに太く、文字というより黒い塊のような存在感があるので、ポスターのメインタイトルや動画のサムネイル、「SALE」「50%OFF」のような短い単語や数字に使うと効果的です。

ただし、極太のウェイトで長い文章を組むと、線のすき間がつぶれて読みにくくなるので、文章には向きません。

見出しのウェイトを変えるだけで、同じ内容でも雰囲気は大きく変わります。

左の見本は太い見出しで力強く、情報の優先順位がはっきりした印象になり、チラシやビジネス資料に向いています。

右の見本は見出しを細くした代わりにサイズを大きくしていて、ファッション誌のような軽やかで洗練された印象になります。

太さだけでなく、明朝体・ゴシック体など書体の種類による印象の違いは、書体による印象の違いの記事で解説しています。

背景が濃いときはウェイトを見直す

濃い色の背景に白い文字を置く「白抜き文字」では、同じウェイトでも白背景のときとは見え方が変わるので、太さを見直しましょう。

ただし、印刷物と画面では、見え方の変わり方が逆になる点に注意が必要です。

印刷物では、背景のインクが紙の上でわずかににじんで白い線を侵食するため、細い白抜き文字はさらに細く、つぶれたように見えがちです。

そのため印刷物の白抜き文字は、普段より一段階太いウェイト(LightならRegular、RegularならMedium)を選ぶと安心です。

一方、画面では、明るいものが実際より大きく膨らんで見える「光滲(こうしん)現象」という目の錯覚によって、白い文字は黒い文字より太く見えやすくなります。
暗い部屋で光っているものが、実際より大きくにじんで見えるのと似た現象です。

左右はまったく同じ太さですが、右の白抜き文字のほうが少し太く、まぶしく感じられるはずです。

画面のダークモード(黒っぽい背景の表示)で文字が太く重たく見えるときは、逆にウェイトを一段階細くすると、白背景のときに近い印象になります。

白抜き文字は背景との明るさの差(コントラスト)も読みやすさに影響するので、コントラスト比の記事もあわせて確認してみてください。

CSSとバリアブルフォントでの指定

Webサイトでは、CSSのfont-weightプロパティでウェイトを指定します。

次のCSSは、見出しを太字、本文を標準、リード文を中間の太さにする例です。

h2 {
  font-weight: 700; /* bold と同じ */
}

p {
  font-weight: 400; /* normal と同じ */
}

.lead {
  font-weight: 460; /* バリアブルフォントなら中間の値も使える */
}

700はキーワードのbold、400はnormalと同じ太さです。

3つめの460のような中間の値が意味を持つのは、バリアブルフォント(可変フォント)を使っているときです。

バリアブルフォントとは、1つのフォントファイルの中で太さなどを連続的に変えられるフォントのことで、2016年に発表されたOpenType 1.8という規格で導入されました(OpenTypeは、現在広く使われているフォントファイルの形式です)。

従来のフォントは「400か500か」という階段状の選択しかできませんが、バリアブルフォントなら「400では弱いが500では強い」ときに、460のような間の太さを選べます。

従来のフォントが決まった段だけを上り下りする階段だとすれば、バリアブルフォントは無段階で動かせるスライダーのようなものです(動かせる範囲はフォントごとに異なります)。

バリアブルフォントでないフォントに中間の値を指定した場合は、用意されている近い太さで表示されます(詳しくはMDNの可変フォントガイドを参照してください)。

初心者のうちは中間の値を使いこなす必要はなく、まずは400と700を使い分けられれば十分です。

実践のポイント

ウェイトを使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 太字のウェイトを持たないフォントで太字ボタンを押すと、ソフトやブラウザが文字を機械的に太らせた「擬似ボールド」になります。
  本来のBoldは、線の交わる部分や文字の中のすきまがつぶれないよう、太さを調整しながらデザインされています。
  一方の擬似ボールドは元の文字の輪郭を外側に太らせるだけなので、画数の多い漢字ほど線同士がくっついて黒くつぶれたり、形がぼやけたりしやすくなります。
  太字にしたいときは、まずそのフォントにBoldやW6などのウェイトがあるかを確かめ、あればフォントの太さの一覧から選びましょう。
  CSSではfont-synthesisプロパティでこの合成を止めることもできます。
• 目立たせたい箇所を増やしすぎて、あちこちを太字にしてしまうと、結局どこが一番大切なのか伝わらなくなります。
  太くする箇所は「本当に読み落としてほしくない部分」だけに絞りましょう。
• ThinやLightのような細いウェイトを小さな文字に使うと、線がかすれて読みにくくなります。
  小さな注釈や補足は、細くするよりも、サイズや色で控えめにするほうが安全です。
• Webフォント(ネット経由で読み込むフォント)では、読み込んでいないウェイトを指定しても、その太さでは表示されません。
  使うウェイトをあらかじめ決めて、必要な分だけ読み込みましょう。

よくある質問

• Q. 「太字」と「ウェイト」は何が違うの?
  A. 太字は「太くする」という操作や見た目のことで、ウェイトはフォントにあらかじめ用意された太さの段階のことです。
  フォントにBoldのウェイトがあれば太字ボタンでそれが使われ、なければ擬似ボールドになります。
• Q. 本文には何のウェイトを使えばいい?
  A. 基本はRegular(400)、和文フォントならW3前後です。
  画面で線が細く感じるときはMedium(500)も試してみましょう。
• Q. 見出しは必ずBoldにするべき?
  A. 必ずではありません。
  見出しを細くする代わりにサイズを大きくして、本文との差をつける方法もあります。
  見出し・本文・補足の役割分担については情報の階層を作るタイポグラフィの記事で解説しています。

まとめ

フォントのウェイトとは文字の太さの段階のことで、数値なら「400が標準、700が太字」、和文フォントのW表記なら「W3が標準、W6が太字」がひとつの目安です。

細いウェイトは大きく使って洗練された印象に、標準ウェイトは本文に、太いウェイトは見出しや短い強調に使い分け、太さだけでも情報にメリハリをつけられます。

今日から試せることとして、次の3つを意識してみましょう。

• 太字を絞る:本当に読み落としてほしくない箇所だけをBold(700、和文ならW6前後)にする
• 用意された太さを使う:太字にする前に、そのフォントにBoldなどのウェイトがあるか確かめる
• 背景が濃いときは見直す:画面の白文字は1段階細く、印刷の白抜き文字は1段階太くする

まずは今作っている資料やページで、太字にしている箇所を数えてみてください。

本当に大事な箇所以外の太字を外し、見出しのウェイトを1段階変えて見比べるだけでも、印象の違いを実感できるはずです。

タイポグラフィ全体の学び方は、デザイン初心者のためのタイポグラフィ学習ロードマップで紹介しています。