「フォント」と「書体」、デザインの話でよく出てくるのに、違いを聞かれると答えに詰まってしまう人は多いのではないでしょうか。
日常会話ではほとんど同じ意味で使われていますが、デザインの現場では区別して使われる場面があり、知っておくと指示やデータのやり取りで迷わなくなります。
この記事では、書体とフォントの違いと、明朝体・ゴシック体・セリフ体・サンセリフ体といった書体の主な種類を、見本を見比べながら初心者向けに解説します。
書体とフォントの違い
まずは「書体」と「フォント」がそれぞれ何を指す言葉なのかを、具体例と合わせて押さえましょう。
書体とは:文字のデザインの種類
書体(タイプフェイス)とは、一定の統一したルールでデザインされた文字の「形の種類」のことです。
同じ「あ」という文字でも、筆で書いたような形、線の太さが均一な形など、さまざまなデザインがあります。
そのデザインの違いを「明朝体」「ゴシック体」のような名前で呼び分けたものが書体です。
つまり書体は、データかどうかに関係なく、文字の見た目のデザインそのものを指す言葉です。
フォントとは:書体を使うためのデータ
フォントとは、書体をパソコンやスマートフォンで実際に表示・印刷できるようにしたデータ(ファイル)のことです。
もともとフォントは、活版印刷の時代に「同じデザイン・同じサイズの金属活字(文字を彫ったハンコのような部品)のひとそろい」を指す言葉でした。
現在では、パソコンにインストールして使う文字のデータを指すのが一般的です。
「書体=デザイン」「フォント=そのデザインを使うためのデータ」と覚えておくと、2つの言葉を混同しにくくなります。
具体例で見る「書体」と「フォント」
「明朝体」「ゴシック体」は書体の分類の名前で、「游明朝」「ヒラギノ角ゴシック」のような具体的な製品名がフォントにあたります。
同じゴシック体でも、複数のメーカーがそれぞれ違うフォントとして作っているため、細かな形や太さは少しずつ異なります。
| 書体の分類(デザインの種類) | フォント(具体的な製品)の例 |
|---|---|
| 明朝体 | 游明朝、ヒラギノ明朝 |
| ゴシック体 | 游ゴシック、ヒラギノ角ゴシック、メイリオ |
| セリフ体(欧文) | Times New Roman、Georgia |
| サンセリフ体(欧文) | Helvetica、Arial |
デザインを人に伝えるときは「ゴシック体で」よりも「游ゴシックのMediumで」のように、フォント名まで指定すると意図どおりの見た目を再現しやすくなります。
たとえば「ゴシック体で」とだけ伝えると、自分はヒラギノ角ゴシックをイメージしていたのに、相手は游ゴシックやメイリオで作ってくる、といったずれが起こります。
書体は「軽自動車」「セダン」のような車の種類、フォントは具体的な車名のようなもので、待ち合わせで車の種類だけ伝えるより車名まで伝えたほうが間違いが起きにくいのと同じです。
書体の主な種類と特徴
書体は、日本語用の「和文書体」とアルファベット用の「欧文書体」に大きく分かれ、それぞれの中にいくつかの種類があります。
和文書体と欧文書体
和文書体は、漢字・ひらがな・カタカナといった日本語の文字のための書体です。
欧文書体は、アルファベットや数字など、英語をはじめとするヨーロッパの言語の文字のための書体です。
和文フォントの多くは欧文の文字も含んでいますが、英字部分だけ欧文フォントに切り替えて見た目を整えることもよくあります。
和文フォントに入っている英字は、日本語と並べたときのなじみやすさを優先して作られていることが多く、英字だけで見ると形や字間のバランスが欧文専用のフォントほど整っていない場合があるためです。
このように、和文と欧文で別々のフォントを組み合わせて使うことを「和欧混植(わおうこんしょく)」と呼びます。
和文書体:明朝体・ゴシック体など
和文書体の代表は、明朝体とゴシック体の2つです。
明朝体は、縦の線が太く横の線が細い書体で、横線の終わりなどに「ウロコ」と呼ばれる三角形の飾りがあります。
ゴシック体は、縦横の線の太さがほぼ均一で、ウロコのような飾りがないシンプルな書体です。
永遠の文字
文字の形を見比べてみましょう。
明朝体
永遠の文字
文字の形を見比べてみましょう。
ゴシック体
※表示される具体的なフォントは、閲覧している端末によって変わります
左の明朝体では「永」の横線が細く、線の終わりに小さな三角形の山(ウロコ)があるのが分かります。
右のゴシック体では、どの線もほぼ同じ太さで、飾りのないすっきりした形になっています。
このほかにも、ゴシック体の角を丸くした丸ゴシック体、筆で書いたような筆書体(毛筆体)、手書き風の書体など、さまざまな和文書体があります。
欧文書体:セリフ体・サンセリフ体など
欧文書体の代表は、セリフ体とサンセリフ体の2つです。
セリフ(serif)とは、文字の線の端に付いている小さな飾りのことで、セリフがある書体をセリフ体と呼びます。
サンセリフ体の「サン(sans)」はフランス語で「〜がない」という意味で、セリフのない書体を指します。
Typeface
Design with letters.
セリフ体
Typeface
Design with letters.
サンセリフ体
左のセリフ体では「T」や「f」の線の端に小さな飾り(セリフ)が付き、線の太さにも強弱があります。
右のサンセリフ体は、線の端が飾りなくすっきりと終わっています。
このほか、手書きの筆記体のようなスクリプト体や、見出しや装飾向けの個性的な書体などもあります。
明朝体とセリフ体、ゴシック体とサンセリフ体は性質が近い
和文と欧文の書体は、次のように対応させて考えると覚えやすくなります。
| 和文書体 | 性質が近い欧文書体 | 共通する特徴 |
|---|---|---|
| 明朝体 | セリフ体 | 線に強弱があり、線の端に飾り(ウロコ/セリフ)がある |
| ゴシック体 | サンセリフ体 | 線の太さがほぼ均一で、飾りがない |
Webサイトの文字を指定するCSS(Webページの見た目を指定する言語)でも、この考え方が使われています。
CSSのfont-familyには、具体的なフォントが使えないときの代わりとしてserif(セリフ系)やsans-serif(サンセリフ系)といった「総称ファミリー」を指定でき、日本語の環境ではそれぞれ明朝体・ゴシック体系のフォントが表示されるのが一般的です(MDN:font-family)。
書体が与える印象と使い分け
書体は、文字の内容が同じでも、読み手が受ける印象を大きく変えます。
線の形や飾りの有無が、そのまま「かっちり」「やわらかい」「力強い」といった雰囲気につながるからです。
| 書体 | よく言われる印象 | よく使われる場面の例 |
|---|---|---|
| 明朝体・セリフ体 | 上品、知的、格調高い、落ち着き | 書籍や新聞の本文、高級感を出したい見出し |
| ゴシック体・サンセリフ体 | すっきり、モダン、親しみやすい、力強い(太いもの) | Webサイトやアプリの文字、看板、資料のスライド |
| 丸ゴシック体 | やわらかい、やさしい、親しみやすい | 子ども向けや生活に身近なサービス |
| 筆書体 | 和風、伝統的、力強い | 和食店、和菓子、年賀状などの見出し |
| 手書き風・スクリプト体 | 個性的、カジュアル、華やか | ロゴ、ポップ、招待状などの短い文字 |
例えば、同じゴシック体でも細いものは繊細でやさしく、太いものは力強く見えます(太さの違いはフォントの「太さ(ウェイト)」で詳しく解説しています)。
筆書体や手書き風の書体は印象が強い分、長い文章には向かないため、見出しやロゴなど短い文字に絞って使うのが基本です。
書体ごとの印象の違いは、書体による印象の違いの記事で見本と一緒に詳しく解説しています。
実践のポイント
書体とフォントを扱うときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 「このフォントで」と伝えたつもりが、相手には「ゴシック体」という書体の系統しか伝わっておらず、違うフォントで作られてしまうことがあります。
指示するときは、フォント名と太さまで具体的に伝えましょう。 - Webページの文字は、見る人の端末に入っているフォントで表示されるため、自分の画面と同じフォントで見えているとは限りません。
たとえば同じページでも、iPhoneやMacではヒラギノ、Windowsでは游ゴシックやメイリオで表示される、といった違いが出ます(文字を画像にした場合や、Webフォントを使った場合は除きます)。
CSSでは「第1希望はこのフォント、なければ次のフォント」のように複数のフォントを候補として並べ、最後にserifやsans-serifを書いておくと、どの端末でも近い雰囲気で表示されます。 - 商用利用やWebでの使用が認められているかどうかは、同じ書体の分類でもフォントごとに規約が異なります。
「フリーフォント」でも、個人での利用は無料で、商用利用は有料というものがあります。
仕事や副業のブログ・動画・チラシなどに使う前には、必ずそのフォントの利用規約(ライセンス)で、「商用利用できるか」「クレジット表記が必要か」「ロゴやWebへの埋め込みなど、使いたい用途が認められているか」を確認しましょう。
よくある質問
- Q. 会話では「フォント」と「書体」のどちらを使えばいい?
A. 日常的な会話ではどちらを使っても通じるので、厳密に使い分けすぎる必要はありません。
ただし、デザインの種類の話なら「書体」、使うデータや製品の話なら「フォント」と意識しておくと、誤解が起きにくくなります。 - Q. Webサイトに明朝体を使ってはいけない?
A. 使ってはいけないわけではありません。
画面の解像度が低かった頃は、明朝体の細い横線がかすれて小さな文字が読みにくくなりやすいと言われ、Webではゴシック体が定番として使われてきました。
高精細な画面が増えた今は、上品さを出したいサイトの見出しや本文に明朝体を使う例も多くあります。 - Q. 見かけたデザインのフォント名を知りたいときは?
A. Webページなら、ブラウザの開発者ツール(ページの仕組みを確認できる機能)でその文字のfont-familyを見ると、指定されているフォント名が分かります。
文字を観察するクセをつけると、書体の違いに気づけるようになっていきます。
観察の進め方はタイポグラフィの観察方法で紹介しています。
まとめ
書体は文字のデザインの種類、フォントはその書体を使うためのデータで、「明朝体」は書体、「游明朝」はフォントにあたります。
和文の明朝体と欧文のセリフ体、和文のゴシック体と欧文のサンセリフ体は性質が近く、書体によって読み手が受ける印象は大きく変わります。
最初は、次の3つを押さえておけば十分です。
- 基本の分類:日本語は「明朝体・ゴシック体」、英語は「セリフ体・サンセリフ体」の組で覚える
- 人に伝えるとき:「ゴシック体で」ではなく「游ゴシックのBoldで」のようにフォント名と太さまで伝える
- Webで使うとき:見る人の端末によって表示されるフォントが変わることを前提にする
まずは身の回りの本や看板、よく見るWebサイトを1つ選び、使われている文字が明朝体・ゴシック体(セリフ体・サンセリフ体)のどちらかを見分けてみてください。
タイポグラフィそのものの考え方はタイポグラフィとはで、文字について学ぶ順番はデザイン初心者のためのタイポグラフィ学習ロードマップにまとめています。


























