太さ（フォントウェイト）

定義

太さ（フォントウェイト）とは、文字の線の太さのことです。ふつうは100（いちばん細い）から 900（いちばん太い）までの数値で表され、400がふつう（regular）、700が太字（bold）として よく使われます。おもしろいのは、サイズや色をまったく変えなくても、太さを変えるだけで どの文字が重要なのかがすぐに伝わる点です。同じサイズ・同じ色の文のなかで、一語だけ太字に すると、その語が自然と先に目に入ります。線が太いほど画面のなかで占める視覚的な重みが大きく なるので、人の目は太いほうへ先に向かうからです。だから太さは、サイズや色を大きく変えずに 階層をつくれる、いちばん控えめで手軽な道具として選ばれます。

なぜ重要か

画面で強調をつくる方法は、サイズを大きくする、色を変える、太さを調整する、くらいしか ありません。このうちサイズを大きくするとレイアウトが押し出され、色を変えると意味が 変わったように見えたり、色のルールとぶつかったりします。いっぽう太さは場所をほとんど 取らずに強弱をはっきりさせるので、画面を揺らさずに階層を立てられます。見出しは太く、 本文はふつうに、補足の説明は少し細く置くだけで、情報の順序が自然と整います。色を 最小限に抑えたシンプルなデザインでは、この太さの良さがとくに際立ち、白黒だけでも じゅうぶん明快な画面をつくれます。また色覚に特性のある人にも太さの差はそのまま伝わる ので、色だけに頼らない強調の手段として、アクセシビリティの面でも心強い味方になります。

よくある間違い

• ひとつの画面で太さを混ぜすぎることです。細い文字、ふつう、太字、極太があちこちで 入り乱れると、どこが本当の強調なのかがぼやけて、せっかくの強調が力を失い、画面が 散らかって見えてしまいます。
• 小さい文字にとても細いウェイト（300以下）を使うことです。線の細い文字を小さく置くと、 解像度の低い画面や明るい背景ではかすれてつぶれ、とくに本文やラベルでは読みにくさが 目立ってしまいます。
• 本文ぜんぶを太字にすることです。すべてが太いと、いざ強調したい部分が消えて平坦になり、 長い文章では目が疲れやすく、かえって読みづらい画面になってしまいます。

実務のヒント

• 色やサイズには触れず、太さだけで強調をつくってみましょう。レイアウトを保ったまま 強弱だけを与えられるので、控えめなデザインにとくによく合います。ただし300のような 細いウェイトは大きな文字にだけ使ってください。小さく使うとかすれてしまいます。
• 実際に使う太さは二、三段階に絞りましょう。たとえば本文は400、強調と小見出しは600、 大きな見出しは700のように役割を決めておくと、画面に一貫性が出て管理もしやすくなります。
• 太さを変えるときは、そのフォントがその太さを実際にサポートしているか確認しましょう。 対応していない値はブラウザが無理にまねて（にせの太字）、つぶれた形になることがあります。

関連概念