ディスプレイ書体とは?見出し向けと本文向けの書体の違いを初心者向けに解説

ディスプレイ書体の基本

まずはディスプレイ書体の意味と、本文向けの書体との違いを押さえましょう。

ディスプレイ書体とは何か

ディスプレイ書体とは、見出しやタイトル、ポスター、バナーのように文字を大きく表示して目立たせる場面のために作られた書体のことです。

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

書体は文字のデザインそのもの、フォントはそのデザインをパソコンやスマホで使えるようにしたデータのことです。

この記事では「書体」と呼びますが、Google Fontsのようなサービス名や関連記事の名前では「フォント」という言葉も出てきます。

ディスプレイ(display)には「見せる・展示する」という意味があり、じっくり読ませるより、パッと見て印象に残すことを優先して形が作られています。

たとえばGoogle Fontsの用語集では、「display」は本文用(body)の対になる言葉で、大きなサイズで使うのに向いた形の違いを表すと説明されています(Google Fonts Knowledge「Display」(英語))。

なお、「ディスプレイ書体」という言葉には、広い意味と狭い意味の2つの使われ方があります。

• 広い意味:大きく見せるための書体全般(見出し用に作られた明朝体やゴシック体も含む)
• 狭い意味:その中でも、手書き風やレトロ風のように個性の強い書体。「装飾書体(デザイン書体)」とも呼ばれる

つまり、装飾書体は、ディスプレイ書体という大きなグループの中の一部という関係です。

この記事では、広い意味の「大きく見せるための書体」としてのディスプレイ書体を扱います。

本文向けの書体との違い

ディスプレイ書体と本文向けの書体のいちばんの違いは、何文字くらいを、どのくらいの大きさで読ませる前提で作られているかです。

本文向けの書体は、小さなサイズで何百文字も続けて読んでも疲れにくいように、癖を抑えた形になっています。

一方のディスプレイ書体は、数文字〜十数文字を大きく見せることが前提なので、細い線や強い個性、凝った形を思い切って使えます。

比べるポイント	ディスプレイ書体(見出し向け)	本文向けの書体
主な用途	タイトル・見出し・ポスター・バナー・ロゴ	記事の本文・説明文・注釈
想定するサイズ	大きいサイズ	小さめのサイズ(本文の大きさ)
想定する文字数	数文字〜1行程度	数行〜長い文章
形の特徴	個性が強い、線の細さや飾りを大胆に使える	癖が少なく、形がそろっていて読みやすい
優先すること	目立つこと・印象に残ること	読みやすさ・疲れにくさ

同じ形でも、大きく見るか小さく見るかで印象は大きく変わります。

ここでいう「ウェイト」とは、Light(細い)・Regular(標準)・Bold(太い)のように、段階で用意された文字の太さのことです(太さ・幅・傾きのバリエーションは書体のバリエーションとはで解説しています)。

下の見本は、どちらも同じ「とても細いウェイト」で書いたものです。

※細いウェイトが入っていない環境では、標準の太さで表示されます

左の見本では、細い線が大きなサイズのおかげで美しく見えますが、右の見本では同じ細さが小さな文字では弱々しく、読むのに目を凝らす必要があります。

小さくすると読みにくくなるのは、画面が小さな点(ピクセル)の集まりで文字を表示しているためです。

文字を小さくすると、細い線が点1つ分よりも細くなり、薄い灰色の点でしか表せなくなります。これが、線が「かすむ」状態です。

また、細かい飾りや入り組んだ部分は、形を表すための点が足りずに線同士がくっつき、黒っぽい塊のように「つぶれる」ことがあります。

このように、大きく使ってこそ魅力が出る書体を本文に流用すると、読みにくさにつながるのです。

文字の太さ(ウェイト)そのものの使い分けは、フォントの「太さ(ウェイト)」で詳しく解説しています。

「Display」と名前に付く書体とオプティカルサイズ

書体の中には、同じデザインのまま「本文用」と「見出し用(Display)」の2つが用意されているものがあります。

たとえばGoogle Fontsで無料公開されている「Noto Serif Display」は、大きなサイズの文字向けに作られた、Noto Serifの見出し用のバリエーションです(Google Fonts「Noto Serif Display」(英語))。

和文書体でも、モリサワの「見出ミン」「見出ゴ」のように、名前に「見出」と付く見出し用の書体があります。

このように、表示するサイズに合わせて線の太さや細部を調整する考え方を「オプティカルサイズ」と呼びます。

ひと言でいえば、同じデザインの書体を、小さな文字用と大きな文字用で作り分けておく考え方です。

MDNの解説では、オプティカルサイズは物理的なサイズに合わせて文字全体の線の太さを変える手法で、小さな文字では線を太めに、大きな文字では線を細く繊細にできると説明されています(MDN「可変フォントガイド」)。

可変フォント(1つのフォントの中で太さなどをなめらかに変えられるフォント)のうち、オプティカルサイズに対応したものでは、表示サイズに合わせてブラウザが自動で形を切り替えてくれることもあります。

つまり「Display」と付く書体は、大きく使ったときにいちばん美しく見えるよう調整された書体だと考えると分かりやすいです。

ディスプレイ書体の使い方

ここからは、ディスプレイ書体を実際のデザインで使うときの基本的な手順とコツを紹介します。

使う場所を「大きく見せる部分」に限定する

ディスプレイ書体は、ページの中で大きく表示する部分にだけ使うのが基本です。

個性が強い書体ほど、長い文章を読ませるのには向かないためです。

具体的には、ページやバナーのタイトル、セクションの大見出し、キャッチコピー、ロゴなどが使いどころになります。

反対に、本文、説明文、ボタンの文字、フォームの入力欄など、正確に読んでもらう必要がある部分には、本文向けの読みやすい書体を使います。

左の見本は、見出しだけを太い明朝体で印象的に見せ、本文は落ち着いたゴシック体にしているので、見出しが引き立ちつつ本文もすらすら読めます。

右の見本は、本文まで見出しと同じ太さ・字間で組んでいるため、見出しとの差がなくなり、本文も詰まって読みにくくなっています。

大きく、短く使う

ディスプレイ書体は、本文よりはっきり大きいサイズで、短い言葉に使うと力を発揮します。

大きさの差が小さいと、せっかくの個性が「なんとなく違う書体」程度にしか伝わらないからです。

見出しと本文の文字サイズの比率は「ジャンプ率」と呼ばれ、ジャンプ率を大きくするほどメリハリのある印象になります(詳しくはジャンプ率で解説しています)。

たとえば本文が16pxで見出しが32pxなら、ジャンプ率は2倍です。

また、大きなサイズの文字は文字と文字のすき間が目立ちやすいので、必要に応じて字間を調整すると仕上がりがきれいになります(カーニングとトラッキング参照)。

カーニングは「AV」のような特定の文字の組み合わせの間隔を1か所ずつ整えること、トラッキングは文章全体の字間を一律に広げたり詰めたりすることです。

文字数の目安としては、ひと目で読み切れる1行程度におさめるのが安全です。

本文用の書体と組み合わせる

ディスプレイ書体を使うときは、本文用の書体とセットで考えます。

個性的な見出しと読みやすい本文を組み合わせることで、目立つことと読みやすいことを両立できるからです。

組み合わせ方の基本は次のとおりです。

• 1つのページで使うディスプレイ書体は、基本的に1種類にしぼる。
  何種類も使うと、どれが一番大事な見出しなのか分かりにくくなります。
• 本文用の書体は、明朝体やゴシック体など癖の少ないものを選ぶ。
  見出しが個性的なぶん、本文は控えめにすると全体がまとまります。
• 見出しと本文で、太さ・大きさの差をはっきりつける。
  差が中途半端だと、見出しが目立たず、ちぐはぐな印象になります。

見出しと本文で役割を分ける考え方は、情報の階層を作るタイポグラフィ術でも紹介しています。

本文用の書体を選ぶ手順は、見やすいフォントの選び方でまとめています。

実践のポイント

ディスプレイ書体で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見出しで気に入った書体を、本文やボタンの文字にも使ってしまう。
  個性の強い書体は小さく長く使うと読みにくくなるので、本文には本文向けの書体を使いましょう。
• 目立たせたい箇所すべてにディスプレイ書体を使ってしまう。
  どこも目立つと、結局どこが一番大事なのか伝わらなくなります。
• 見出しを本文と同じくらいの小さなサイズで使ってしまう。
  ディスプレイ書体の細い線や飾りは、小さくするとつぶれたりかすんだりするので、大きさの差をしっかりつけましょう。
• サイトや作品全体の雰囲気と合わない書体を選んでしまう。
  目立てばよいのではなく、伝えたい雰囲気に合っているかを確認しましょう。

雰囲気に合う書体を選ぶときは、次のような大まかな目安から考えると失敗しにくくなります。

• 上品さ・高級感を出したい:線が細く、太い線と細い線の差がある明朝体やセリフ体
• 力強さ・元気さを出したい:太くどっしりしたゴシック体やサンセリフ体
• 親しみやすさ・楽しさを出したい:丸ゴシック体や手書き風の書体

書体ごとの印象は書体による印象の違い、届けたい相手に合わせた選び方はターゲットに合わせた書体選びで詳しく解説しています。

よくある質問

• Q. ディスプレイ書体と装飾書体は何が違う?
  A. 厳密な線引きはなく、重なる部分が大きい言葉です。
  ディスプレイ書体は「大きく見せるための書体」全般を指し、その中でも手書き風・レトロ風など特定のテイストを強く表現するものを装飾書体と呼ぶことが多いです。
• Q. 見出しには必ずディスプレイ書体を使うべき?
  A. いいえ、必須ではありません。
  本文と同じゴシック体でも、太いウェイトにして大きくするだけで十分に見出しらしくなります。
  ディスプレイ書体は、より強い個性や印象を出したいときの選択肢と考えましょう。
• Q. ディスプレイ書体はどこで探せる?
  A. たとえばGoogle Fontsでは、書体を分類で絞り込む機能に「Display」という分類があり、見出し向けの書体をまとめて探せます。
  使う前には、商用利用やWebでの使用が許可されているかなど、各書体の利用条件を必ず確認しましょう(フォントライセンス参照)。

まとめ

ディスプレイ書体とは、見出しやタイトルのように文字を大きく見せる場面のために作られた書体で、小さな文字で長く読ませる本文向けの書体とは得意分野が違います。

大きく・短い言葉に限定して使い、本文には癖の少ない書体を組み合わせることで、目立つことと読みやすいことを両立できます。

まずは身の回りの雑誌の表紙やWebサイトのトップページを見て、見出しと本文で書体や太さがどう使い分けられているかを1つ観察してみてください。