書体のバリエーションとは?ウェイト・幅・斜体の使い分けを初心者向けに解説

書体のバリエーションの基本

まずは「フォントファミリー」という考え方と、ウェイト・幅・傾きの3つのバリエーションを押さえましょう。

書体のバリエーションとフォントファミリー

書体のバリエーションとは、同じデザインの書体の中に用意されている、太さ・横幅・傾きなどが違うバージョンのことです。

ここでいう「書体」とは、文字の形のデザインの系統のことで、明朝体やゴシック体のような分類や、ひとつひとつのデザインを指します(フォントとの違いはフォントと書体の種類で解説しています)。

同じデザインから作られたバリエーションをひとまとめにしたものを「フォントファミリー(書体ファミリー)」と呼びます。

たとえば「Helvetica Neue」というファミリーには、細い「Light」、標準の「Regular」、太い「Bold」などが含まれていて、どれも同じ設計思想の文字なので並べても違和感がありません。

ファミリーの中のひとつひとつのバリエーションは「スタイル」や「フェイス」と呼ばれます。

バリエーションには主に、文字の太さを変える「ウェイト」、横幅を変える「幅」、文字を傾ける「イタリック・斜体」の3つがあります。

バリエーション	何が変わるか	主な呼び名の例	主な使い道
ウェイト	文字の線の太さ	Thin、Light、Regular、Medium、Bold、Black	見出しと本文の差、強調
幅	文字の横幅	Condensed(幅が狭い)、Normal、Expanded / Extended(幅が広い)	狭いスペースに文字を収める、印象を変える
傾き	文字の傾き	Italic(イタリック)、Oblique(オブリーク)	欧文の書名・強調・引用

どのバリエーションが用意されているかは書体によって違い、ウェイトが2種類だけのものもあれば、幅違いまでそろった大きなファミリーもあります。

ウェイト:文字の太さ

ウェイトとは、文字の線の太さのことです。

バリエーションの中でいちばんよく使われるのがウェイトで、太いほど力強く目立ち、細いほど繊細で軽やかな印象になります。

※お使いの環境に入っていないウェイトは、近い太さで表示されます

左の見本では同じ書体のまま太さだけが変わっていて、右の見本では太さの違いだけで見出し・本文・注釈の役割がひと目で分かるようになっています。

ウェイトの名前と、CSSで指定する数値(100〜900)には目安となる対応があり、MDNでは「400がNormal(Regular)、700がBold」などと整理されています(MDN「font-weight」)。

ウェイトの選び方や、太さで印象がどう変わるかは、フォントの「太さ(ウェイト)」で詳しく解説しています。

幅:文字の横幅

幅とは、文字1つ1つが横方向にどれだけ場所を取るかのことです。

幅の狭いバリエーションは「コンデンス(Condensed)」、広いものは「エキスパンデッド(Expanded)」や「エクステンデッド(Extended)」と呼ばれます。

コンデンスは、バナーや表、スマートフォンの狭い画面など、限られた横幅にたくさんの文字を収めたいときに便利です。

反対に幅の広いバリエーションは、ゆったりとした堂々とした印象を出したいタイトルなどに向いています。

ここで大事なのは、書体として設計された幅違いと、文字を機械的に縮めたものは別物だということです。

左の見本は幅が狭くても縦と横の線のバランスが保たれていますが、右の見本は横方向にだけ縮めたため、縦の線だけが細くなり、OやDの丸みもつぶれて不自然に見えます。

日本語のデザインでは、文字を縦長・横長に変形させる「長体(ちょうたい)」「平体(へいたい)」という処理が使われることもありますが、強くかけると同じように形がゆがむので、使うとしても控えめにするのが無難です。

傾き:イタリックと斜体(オブリーク)

傾きのバリエーションには、「イタリック」と「オブリーク」の2種類があります。

イタリックは、手書きの筆記体をもとに形そのものを描き直した傾いた書体で、標準の文字(ローマン体と呼ばれます)とは字形が変わる文字もあります。

ここでいう「ローマン体」とは、傾いていない、まっすぐ立った標準の文字のことです。

なお、「ローマン体」はセリフ体(線の端に小さな飾りがある欧文書体)の別名として使われることもあり、文脈によって意味が変わる言葉です(セリフ体・サンセリフ体とは参照)。

オブリークは、標準の文字をそのまま斜めに傾けた書体で、日本語ではどちらもまとめて「斜体」と呼ばれることが多いです。

Google Fontsの用語集でも、イタリックは半筆記体の形にもとづくスタイル、オブリークはローマン体を傾けたもので、独自に描かれたイタリックとは別物だと説明されています(Google Fonts Knowledge「Italic」(英語)、「Oblique」(英語))。

左と中央を比べると、イタリックでは「a」が丸い一筆書きのような形になり、「f」も下に伸びるなど、形そのものが描き直されているのが分かります。

右の見本は標準の形をそのまま傾けただけなので、字形は左と同じです。

欧文では、本や作品のタイトル、外国語の語句、強調したい言葉などにイタリックがよく使われます。

一方、日本語の書体には、もともとイタリックが用意されていないことがほとんどです。

書体のバリエーションの使い方

ここからは、バリエーションを実際のデザインやWebサイトで使うときのコツとCSSでの指定方法を紹介します。

書体を増やす前にバリエーションで差をつける

見出しや強調で差をつけたいときは、まず同じファミリーのバリエーションで表現できないか考えるのがおすすめです。

同じファミリーの文字は形の骨格がそろっているので、太さや幅を変えても全体の統一感が崩れにくいからです。

たとえば、見出しはBold、本文はRegular、注釈はLightというように役割ごとにウェイトを決めておくと、書体は1つでも情報の優先順位がはっきり伝わります。

ただし、使うウェイトの種類は2〜3種類程度に絞りましょう。

種類を増やしすぎると、太さの差が小さくなり、かえってどれが大事なのか分かりにくくなるからです。

Webフォントを使う場合は、ウェイトを1つ増やすごとに読み込むデータも増えるので、表示速度の面でも絞っておくと安心です(日本語Webフォントとは参照)。

見出し・本文・補足情報の関係づくりは、情報の階層を作るタイポグラフィ術で解説しています。

書体そのものの選び方は、見やすいフォントの選び方で解説しています。

日本語の強調は斜体より太字や色で

日本語の文章で強調したいときは、斜体ではなく太字(ウェイト)や色、下線などを使うのが基本です。

日本語の書体にはイタリックがほとんど用意されていないため、斜体を指定するとブラウザやソフトが通常の文字を機械的に傾けて表示し、形が不自然になりやすいからです。

欧文のイタリックは、手書きの筆記体から生まれた形なので、傾いていても自然に見えます。

一方、日本語にはそれにあたる傾いた字形がなく、文字は正方形の枠に収まるように設計されているため、傾けると枠ごとゆがんだように見えてしまいます。

左の見本は傾けた部分だけ文字がゆがんで見え、強調したいのにかえって弱々しい印象になっていますが、右の見本は太さと色の変化で自然に目立っています。

なお、HTMLの<em>(強調)や<i>といった要素は、ブラウザの初期設定で斜体として表示されることが多いので、日本語のサイトではCSSで見た目を調整しておくと安心です。

CSSでバリエーションを指定する

Webサイトでは、CSSのプロパティでバリエーションを指定します。

下のコードは、ウェイト・幅・傾きをそれぞれ指定する例です。

.heading {
  font-weight: 700; /* 太字(Bold) */
}
.note {
  font-weight: 300; /* 細字(Light) */
}
.label {
  font-stretch: condensed; /* 幅の狭いバリエーション */
}
.book-title {
  font-style: italic; /* イタリック */
}

font-weightは太さ、font-stretchは幅、font-styleは傾きを指定するプロパティです。

たとえばfont-weight: 700と書くと、ブラウザはそのファミリーの中からBoldにあたる太さを選んで表示します。

コードを書かない人は、デザインツールの文字設定で「Bold」や「Light」を選ぶのと同じことを、文字で指示していると考えれば十分です。

font-stretchは、最新のCSSの仕様ではfont-widthという名前に改められていますが、互換性のため古い名前も使えるようになっています(MDN「font-stretch」)。

注意したいのは、指定したバリエーションが書体に入っていない場合の動きです。

幅については、書体に幅違いが入っていなければfont-stretchを指定しても何も変わりません。

太さや傾きについては、ブラウザが通常の文字を太らせたり傾けたりして、それらしく作り出すことがあります(MDN「font-style」)。

この自動で作られた太字や斜体は形が崩れやすく、MDNでも、日本語などのフォントはこうした変化形を含まないことが多く、自動で作ると読みやすさが損なわれる可能性があると説明されています(MDN「font-synthesis」)。

自動の太字は、文字の輪郭を一律に太らせるだけなので、画数の多い漢字では線どうしのすき間が埋まり、つぶれて見えやすくなります。

書体として設計されたBoldは、太くしても線どうしがぶつからないよう、すき間や細部まで調整されているため、同じ太字でも仕上がりが大きく違います。

最近は、1つのフォントファイルの中で太さや幅などを連続的に変えられる「可変フォント(バリアブルフォント)」も増えていて、対応する書体なら細かい数値で太さや幅を調整できます(MDN「可変フォントガイド」)。

これまでのフォントは、LightやBoldなど太さごとに別のファイルが用意されていましたが、可変フォントなら1つのファイルで、書体が対応する範囲の中なら「450」のような中間の太さも指定できます。

実践のポイント

書体のバリエーションを使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• ファミリーに入っていない太さや傾きを、ソフトやブラウザの機能で無理に作ってしまう。
  自動で作られた太字や斜体は形が崩れやすいので、使いたいウェイトやイタリックが入った書体を選びましょう。
• 文字を横方向に縮めて、コンデンスの代わりにしてしまう。
  線の太さのバランスが崩れて読みにくくなるので、幅を詰めたいときは幅違いのバリエーションを使いましょう。
• ウェイトの種類を使いすぎてしまう。
  1つのデザインで使う太さは2〜3種類に絞ると、差がはっきりして伝わりやすくなります。
• 日本語の文章を斜体で強調してしまう。
  日本語の強調は太字や色を使うほうが自然で読みやすくなります。

よくある質問

• Q. イタリックと斜体は同じもの?
  A. 日本語ではまとめて「斜体」と呼ばれることが多いですが、厳密には別物です。
  イタリックは筆記体をもとに形を描き直した書体、オブリークは通常の文字をそのまま傾けた書体です。
• Q. 太字にしたいのに、思ったほど太くならないのはなぜ?
  A. 使っている書体に、指定した太さのウェイトが入っていない可能性があります。
  その場合は近い太さで表示されたり、ブラウザが自動で太らせたりするので、どのウェイトが入っている書体かを事前に確認しましょう。
• Q. 日本語の書体にも幅違いはある?
  A. 日本語の書体は、すべての文字が同じ大きさの正方形の枠に収まるように作られるのが基本で、欧文ほど幅違いのバリエーションは多くありません(正方形の枠については和文書体の基本参照)。
  ただし、文字の幅を詰めた書体や、縦長に設計された書体なども存在するので、必要に応じて探してみましょう。

まとめ

書体のバリエーションとは、同じフォントファミリーの中に用意された、ウェイト(太さ)・幅・傾き(イタリック・斜体)の違うバージョンのことです。

書体を増やす前にバリエーションで差をつけると、統一感を保ったままメリハリが出せますが、入っていない太さや傾きを無理に作ったり、日本語を斜体にしたりすると形が崩れるので注意しましょう。

まずは自分がよく使う書体に、どんなウェイトや幅、イタリックが入っているかを、パソコンのフォント一覧や配布元のページで確認してみてください。