【フォントの基礎】書体の種類と違い フォント形状の特徴などを解説

最低限これだけは知っておきたいフォントの基本を図解付きでわかりやすく解説していきます。

日本語フォントの種類

日本語フォントはさまざまな種類があります。

膨大な数のフォントが存在していますが、最低限ゴシック体と明朝体の2つだけは覚えておきましょう。

ゴシック体は装飾がなく線幅にも差をつけないシンプルな書体。

明朝体は線の強弱、端や角の装飾、線のはらいがあるのが特徴。

ゴシック体を使うか、明朝体を使うかによって与える印象や読みやすさが大きく変わるので違いをしっかりと意識しておきたいですね。

ゴシック体

ゴシック体は装飾がないため太くしても視認性を損なわなず、遠くからでも読みやすいフォント。

目を引きやすく力強い印象を与えるゴシック体は、その特性から広告や見出しなどに多く利用されています。

また、多くのゴシック体は線幅がほぼ均一になっています。

英語ではGothicですが海外では使われておらず、装飾のないフォントという意味のサンセリフ体が日本で言うゴシック体に相当します。

明朝体

明朝体は『うろこ』と『はらい』によって飾り付けされ、文字の縁や角が強調されているのが特徴。

うろこは必ず右側につくため文字が右上がりに見え、右上がりの文字が美しい楷書体に通ずる部分があります。

線は細いものの要所はうろこによって強調するため細い文字でもハッキリと読むことができるので長文に適したフォントとなっています。

丸ゴシック体

丸ゴシック体は線の端や角が丸くなったゴシック体のこと。

ゴシック体をベースにしているので線の幅は均一でゴシック体の視覚性の高さも持っています。

端や角が丸くなることでやわらかい印象になりお堅い感じがなくなりますね。

漢字五体

漢字五体とは下記の5つの書体のこと。

現在では楷書体と行書体が一般的に使われており、過去の文字の特徴を活かして現代漢字にデザインしたフォントも存在しています。

五体は『和風』『伝統』『歴史』を強調するタイトルや見出しに利用されることが多いです。

漢字書体の発展

漢字書体は以下の流れで発展してきました。

楷書体

楷書体は漢字書体である五体のなかではもっとも新しく、すべての書体を継承している基本書体となっています。

草書体や行書体と比べると省略や流し書きなく『正式』『堅い』といった印象があり、読みやすいため認印やビジネス文書でよく使われています。

楷書体と行書体の違いは？

行書体と楷書体の最大の違いは崩して書くか、しっかり止めるかの違いです。

上図のように比較してみると一目瞭然です。

• 行書体：筆で流れるように書くため、繋がりや省略がある
• 楷書体：一画一画、筆を離して書く

楷書体と明朝体の違いは？

明朝体と楷書体の大きな違いは以下の3点です。

• 横線の傾き：明朝体は直線だが楷書体は傾く
• 横線の幅：明朝体は横線が細いが楷書体はほぼ同じ幅
• うろこ：明朝体はうろこがハッキリしている楷書体はハッキリしていない

上図の「書」という漢字を基準に比較してみるとわかりやすいと思います。

筆書体

筆書体は可読性や判別性が低いものの、日本の伝統的な雰囲気や高級感を出したり、インパクトや勢いがあるのでタイトルなどに向いています。

筆書体の多くが漢字五体の楷書体や行書体をベースにしています。

装飾書体（デザインフォント）

装飾書体は力強いものからやさしいものまで、個性やデザイン性の強い書体で、個々の主張が激しいのでタイトルやロゴに使用されることが多いです。

デザイン書体はインパクトが有るため目を引きますが、可読性が低いものが多いので多用するとゴチャゴチャした印象になるので使う際には注意が必要。

ついつい使いたくなってしまう装飾書体ですが、安っぽく見えやすいので初心者は使わないほうが無難だったりします。

UD書体（ユニバーサルデザインフォント）

UDフォントは伝わりやすさを重視したユニバーサルデザイン、要は「すべての人に対して配慮した」読みやすいフォントです。

UD書体は文字の重要な3つの要素を重視してデザインされています。

「どんな人にも伝わる書体」ということで公共の場など、多くの人に正確に伝えたい場合はUD書体を利用すると良いでしょう。

UDそのもに書体の形状があるわけではないので、UDゴシック体、UD明朝体と言った感じで既存書体をベースに伝わりやすさを重視して作成されています。

コンデンス書体

コンデンス書体は長体デザインになっており、可読性、判別性、誘目性を維持しつつも多くの文字を収めることができます。

コンデンス書体は単純に縦横比を縮小したものとは異なり、縦長のサイズが最適となるよう専用にデザインされたフォントです。

上図はコンデンス書体と縦横比を変更した書体の比較図です。

コンデンス書体は単純に幅を縮小しただけのものとは違って縦、横ともに線幅が均一に見えるように調整されています。

欧文フォントの種類

欧文フォント（アルファベット）も日本語フォント同様に多くの種類がありますが、最低限覚えておくべきは下記の3種類。

もっともよく使用するセリフとサンセリフの違いを簡潔に表すと下記のような感じになります。

セリフ（Serif）

セリフ体とは文字の端にSerifと呼ばれる小さな線を装飾したものを指します。

セリフは日本語フォントで言うところのうろこで、明朝体と似た印象を与えます。

セリフの種類

セリフにも種類があり、代表的なのは下記の3つ。

上から順に新しく、ヘアラインセリフはモダンな印象を与え、ブラケットセリフは伝統的な印象を与えます。

サンセリフ体

サンセリフ体とはセリフのないアルファベットフォントのこと。

フランス語で“無い”を表すSansが語源になっています。

日本語書体で言うゴシック体と同じく、端に装飾がなく視認性に優れています。

サンセリフの種類

サンセリフは大きく分けて4つの種類があります。

スクリプト体

スクリプト体とは手書きで流れるように書ける続け文字のこと。

フォーマルなスクリプト体とカジュアルなスクリプト体があり、どちらも日本のデザインでは読む文字としてではなく、装飾やロゴとして使用されることが多くなっています。

日本語フォントでいう達筆な連綿体と普通の手書き感あふれる手書き文字の違いみたいな感じですね。

文字の視覚3要素

文字で伝える場合に最低限意識しなければいけないのが下記の3つ。

順番に解説していきます。

可読性

文字の可視性とは読みやすさのこと。

『伝わる文字』として一番イメージしやすい項目であり、もっとも重要なポイント。

可読性はフォントだけでなく『配色』『文字サイズ』『余白』『文字間、行間、カーニング』など文字組みによって大きく変化するため用途に応じて適切なものを選ぶようにしましょう。

判別性

判別性は似通った形状の文字を誤認すること無く容易に判別できるかどうか。

判別性の低い文字が多く交じると誤読しやすくなるので注意が必要です。

日本語はひらがな、カタカナ、英字、漢字とさまざまな組み合わせにより判別性を上げることが可能ですが、欧文書体は限られた記号で表現しなければいけないため判別性をあげる工夫が必要になります。

誘目性（誘導性）

誘目性は文字に視線を集める効果を期待したもの。

長文を読む際に誘導性は重要ではありませんが、見出しやタイトルの誘導性は重要ですよね。

広告では書体によるブランドイメージを考慮しつつ誘導性の高いフォントを使いましょう。

フォントをもっと詳しく学びたい人へ

デザイナーはもちろん、ノンデザイナーでもフォントの理解を深めておいて損はありません。

今回紹介したゴシック体と明朝体。欧文フォントではサンセリフ体とセリフ体。

この飾りの有無の2種類のフォントをうまく使い分けるだけでもデザインの質が大きく変わります。

フォントの事を学びたい人へおすすめの本

フォントについて学びたい場合にとりあえずこれ読んでおけばOKっていう本を厳選して2冊ご紹介。

タイポグラフィの基本ルール

ほんとに、フォント。

フォントが与える印象について

フォントを選ぶ際は見た目や読みやすさだけでなく、与える印象についても考慮する必要があります。

書体の種類として解説しましたが、明朝体は「繊細」「高級」「上品」「伝統的」などの印象を与えやすくなっています。

印象に合うフォントを選べば問題ありませんが、印象と異なるフォントを使用してしまうとデザインを崩すことになるのでフォントイメージが適切なフォントを選ぶようにしましょう。

フォントのダウンロードはAdobe Fontsがおすすめ

フォントは単品購入やサブスクリプションがありますが、5〜10万するため初心者には導入しにくいですよね。

万人におすすめできるのは15,000以上のフォントが使い放題になるAdobe Fonts

基本的なフォントはすべて網羅されており、検索＆アクティベートもPhotoshopやIllustratorからボタン一発。

なんとAdobe CCユーザーなら無料で全フォントが使い放題！

文字を扱うデザインにはAdobe CCが欠かせない！

Adobeソフトはプロに欠かせないソフトです。文字を扱うデザインは主にPhotoshop、Illustratorで扱います。他にも動画編集で扱うソフトPremiere ProやAfter Effectsでも文字の扱いは重要です。

もしまだAdobe CCをひとつも契約していないっていう人はPhotoshopもIllustratorもPremiereも全てのソフトが使えるコンプリートプランを購入する方法を解説しているので下記を参考にしてみてください。Adobe Fontsも使い放題です。

まだAdobe CC持ってない人はこちら

---

フォント以外のデザインに関する記事は下記にまとまっていますのでこちらもあわせてご覧ください。