書体の種類は5つで足りる｜セリフ体・サンセリフ体の見分け方と使い分け

フォントの一覧を開いて、上から順にクリックしては戻る。気づいたら20分たっていた、なんてことありませんか？

迷う原因は、書体の分類を知らないまま1つずつ見ているからです。書体は大きく分けると4種類しかありません。分類が頭に入っていると、最初に種類を決めて、その中から選ぶだけになります。
このレッスンでは、書体とフォントの違い、セリフ体とサンセリフ体の見分け方、日本語の明朝体とゴシック体の関係まで扱います。読み終わったら、街の看板を見ただけで種類を言い当てられるようになりますよ。

書体とフォントの違い

まず用語を整理します。

書体（タイプフェイス）は、文字のデザインそのものを指します。「この形で文字を作る」という設計のことです。
フォントは、その書体を実際に使えるようにしたデータを指します。パソコンにインストールする側です。

もともとは活版印刷（金属の文字を並べて紙に刷る、昔の印刷）の言葉です。同じ書体でも、10ポイントの活字の一式と12ポイントの一式は別のフォントとして数えました。書体が設計図、フォントが現物という関係です。

ただし今の現場では、この2つをほぼ同じ意味で使います。「フォント何にする？」と聞かれたら書体の話です。厳密に使い分けなくても困りません。用語の由来として知っておけば十分です。

セリフ体とサンセリフ体

欧文書体の分類は、この2つを覚えれば大半が片付きます。見分けるポイントは、文字の先端です。

セリフは、文字の線の端についている小さな飾りです。Tの横棒の両端が下に少し伸びていたり、Iの上下に短い横線がついていたり。この飾りがある書体をセリフ体と呼びます。TimesやGaramondが代表です。

サンセリフの「サン（sans）」はフランス語で「〜がない」の意味です。つまりセリフのない書体で、線の太さが一定で先端に飾りがありません。サンセリフ体と呼び、HelveticaやArialが代表です。

身近なところで見比べられます。スマホの画面に出る英字、YouTubeやInstagramのボタンの文字は、ほとんどがサンセリフ体です。いっぽう洋書や英字新聞の本文はセリフ体が中心です。手元の画面と紙を並べると、先端の飾りの有無がすぐ分かります。

印象は次のように分かれます。

	セリフ体	サンセリフ体
先端の飾り	ある	ない
線の太さ	太い部分と細い部分がある	ほぼ一定
印象	伝統的・落ち着いた・格式	現代的・すっきり・親しみ
得意な場面	長い文章、紙の本、高級感を出したいとき	画面の文字、小さい文字、看板
代表	Times、Garamond	Helvetica、Arial

セリフが長文で読みやすいのは、飾りが横方向のつながりを作って、目線が次の文字へ流れやすくなるからです。紙の本の本文にセリフ体が多いのは、この理由があります。

反対に、画面の小さい文字ではセリフが不利になります。飾りの部分がつぶれて、線が太く見えたりぼやけたりするからです。だからWebの本文にはサンセリフ体をよく使います💡

日本語の明朝体とゴシック体

日本語にも同じ対立があります。明朝体がセリフ体、ゴシック体がサンセリフ体に対応します。

明朝体は、横線が細く縦線が太く、横線の右端に三角のふくらみ（ウロコ）があります。新聞や小説の本文がこれです。落ち着いた、真面目な印象になります。

ゴシック体は、縦も横もほぼ同じ太さで、ウロコがありません。駅の案内表示やスマホの画面がこれです。遠くからでも読みやすく、小さくしてもつぶれません。

迷ったときの判断は単純です。

Webの本文は、10年前ならゴシック体一択でした。今は画面がきれいになったので、明朝体の本文も読めます。ただし小さい文字や細い明朝体は、見る端末しだいでかすれます。本文で使うなら太さを1段上げてください。フォント名の後ろに付くRegular（標準）をMedium（中太）に変えるだけです。

この4分類で足りる

ここまでの4つに手書き系と装飾系を足すと、書体の種類はこう整理できます。

種類	特徴	使う場面
明朝体	横が細く縦が太い。ウロコあり	長文・落ち着いた印象
ゴシック体	太さが一定。ウロコなし	見出し・画面・遠くから読む文字
セリフ体	欧文。先端に飾りあり	欧文の長文・格式を出したいとき
サンセリフ体	欧文。飾りなし	欧文の見出し・画面の文字
手書き・装飾系	筆記体、丸文字、飾り文字など	ロゴや短いあしらいだけ

手書き系と装飾系は、使う量を決めておくと事故が減ります。1つの作品につき、装飾的な書体は1か所まで。本文に使うと読みにくくなり、2か所以上に使うとどちらも目立たなくなります。

フォントの一覧を見て迷うのは、この分類を通さずに個別のフォント名から選ぼうとするからです。先に「今回は日本語のゴシック体」と決めてしまえば、候補は一気に絞れます。具体的な選び方は次のレッスンで扱います。

ミニ実践：街で書体を採集する

今日の帰り道でできる課題です。道具はスマホのカメラだけ。

1. 外に出て、看板・ポスター・商品パッケージを見ながら歩きます
2. セリフ体（明朝体）を3つ撮影します。化粧品、和菓子、不動産、病院あたりに多く見つかります
3. サンセリフ体（ゴシック体）を3つ撮影します。駅の案内、コンビニ、家電の広告に多く使われています
4. 撮った6枚を並べて、1枚ずつ「なぜこの書体を選んだのか」を1行で書きます
5. 1枚だけ選んで、頭の中で書体を入れ替えてみます。明朝体の化粧品広告をゴシック体にしたら、印象がどう変わるか

4と5が本番です。撮るだけだと記録で終わりますが、理由を言葉にすると自分の作品で使えるようになります。「高級感を出したいから明朝」「小さくても読ませたいからゴシック」。この言い換えができれば、書体選びで迷う時間が減ります◎

慣れてきたら、明朝体の中でも横線の細さが違うこと、ゴシック体にも角ばったものと丸いものがあることに気づきます。そこまで見えたら、分類の目は十分に育っています。

やってしまいがちな失敗

1つの作品で書体を3種類以上使う

書体を増やすと、まとまりが消えます。読む人は「なぜここだけ違うのか」を考えてしまいます。
直し方は、1作品につき書体は2種類まで。見出しと本文で分けるか、いっそ1種類にして太さと大きさで差をつけます。同じ書体の太字と細字を使い分けるほうが、別の書体を足すよりきれいにまとまります。

和文と欧文をそのまま混ぜる

日本語のフォントに入っている英数字は、おまけの扱いのことがあります。日本語部分はきれいなのに、英字だけ間延びして見えるのはこれが原因です。
直し方は、英数字だけ別のフォントを指定する。明朝体にはセリフ体、ゴシック体にはサンセリフ体を合わせると自然に見えます。

細い明朝体を小さく使う

細い明朝体を12px以下で使うと、横線が消えて読めなくなります。特にスマホで顕著です。
直し方は、小さい文字はゴシック体にするか、明朝体のまま太さを1段上げる。デザインツールの画面では読めても、実機で確認すると印象が変わります。必ずスマホで見てください。

よくある質問

書体とフォントは使い分けたほうがいいですか？

実務では使い分けなくて大丈夫です。今はどちらも同じ意味で通じます。
もとの意味だけ押さえておけば十分です。書体（タイプフェイス）が文字のデザイン、フォントがそれを使えるようにしたデータ。面接や試験で聞かれたときにこう答えられれば問題ありません。

書体の種類は全部でいくつありますか？

個別のフォントは数万種類ありますが、分類なら5つで足ります。明朝体・ゴシック体・セリフ体・サンセリフ体・手書きや装飾系です。
細かく分けると、欧文だけでオールドスタイル、スラブセリフ、スクリプト体などに枝分かれします。ただし最初から細かい分類を覚えても選ぶのは速くなりません。まず5つで判断して、必要になったら足していってください。

明朝体とゴシック体、どちらが読みやすいですか？

場面で逆になります。
長い文章を続けて読むなら明朝体が有利です。線の強弱があるほうが、文字の形を見分けやすいからです。
一瞬で目に入れる文字ならゴシック体が有利です。看板や見出し、小さい画面の文字はゴシック体を選んでください。「読みやすさ」には長く読む場合と一瞬で見る場合の2種類があって、答えが違います。

無料のフォントを仕事で使ってもいいですか？

使えるものと使えないものがあります。無料でも、個人利用だけ許可、商用は有料、ロゴへの使用は禁止など、条件はフォントごとに違います。
ダウンロードする前に、配布ページのライセンス表記を必ず読んでください。判断に迷ったら、Google Fontsのように商用利用を明記しているものを選ぶと安全です。

次に学ぶこと

今回の要点をまとめます。

• 書体（タイプフェイス）は文字のデザイン、フォントはそのデータ。実務では区別しなくてよい
• セリフ＝文字の先端の飾り。あるのがセリフ体、ないのがサンセリフ体
• 日本語では明朝体がセリフ体、ゴシック体がサンセリフ体に対応する
• 長く読ませるなら明朝体、一瞬で見せるならゴシック体
• 1作品につき書体は2種類まで

分類が分かったら、次はその中から1つを選ぶ番です。フォントの選び方で、印象から候補を絞る手順を扱います。同じ文面を3つのフォントで組んで比べる課題つきです。

フォントを決めたあとは、文字と文字の間の調整が待っています。文字詰めの基本で、タイトルが締まって見える調整を練習してください。コース全体の流れはデザインの基本コース目次から確認できます。