【フォントの基礎】書体の種類と視覚性 最低限知っておきたい3つのコト

わからないのアイコン画像わからない

フォントの種類はいっぱいあってどれを選べばいいかわからない…

黒猫のアイコン画像黒猫

フォントの種類と読みやすさの特徴を知っておくだけでフォント選びがグッと楽になるよ!

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

目次

日本語フォントの種類

日本語フォント

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

  • ゴシック体
  • 明朝体
  • 丸ゴシック体
  • 五体(楷書体/行書体/篆書体/隷書体/草書体)
  • 宋朝体
  • タイポス書体
  • ファンテール書体
  • 手書き書体
  • 装飾書体

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

ゴシック体と明朝体の比較図
ゴシック体と明朝体の比較

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

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

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

うさぎのアイコン画像うさぎ

主要なフォントをかんたんに解説していきます

ゴシック体

ゴシック体のイメージ図

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

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

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

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

明朝体

明朝体のうろことはらい

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

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

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

丸ゴシック体

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

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

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

ゴシック体と丸ゴシック体の比較図
ゴシック体と丸ゴシック体の比較

漢字五体

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

  • 楷書体
  • 行書体
  • 隷書体
  • 草書体
  • 篆書体

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

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

漢字書体の発展

漢字書体は甲骨文▶金文▶篆書体▶隷書▶草書/行書▶楷書体といった流れで発展してきた。

漢字書体発展の推移図

楷書体

楷書体

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

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

楷書体と行書体の違いは?
行書体と楷書体の違い 比較図

行書体と楷書体の最大の違いは崩して書くかどうか。

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

装飾書体

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

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

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

欧文フォントの種類

欧文書体の種類

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

  • セリフ(Serif)
  • サンセリフ(sans serif)
  • スクリプト(Script)

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

  • セリフ体:飾り(Serif)あり
  • サンセリフ体:飾りなし
  • スクリプト体:筆記体

セリフ(Serif)

セリフ体(Serif)セリフ箇所の解説画像
色箇所がセリフ

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

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

立体活字
セリフ体はローマン体とも呼ばれる立体活字で、垂直に文字が立っている書式を指す

セリフの種類

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

セリフ3種(ヘアラインセリフ・ブラケットセリフ・スラブセリフ)
  • ヘアラインセリフ(モダンフェイス)
  • ブラケットセリフ(オールドフェイス)
  • スラブセリフ(エジプシャン)

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

サンセリフ体

サンセリフ体サンプル

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

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

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

サンセリフの種類

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

サンセリフの種類(グロテスク・リアリスト・ヒューマニスト・ジオメトリックサンセリフ)
  • グロテスクサンセリフ
  • リアリストサンセリフ
    • ネオグロテスク体
    • トランジショナル体
  • ヒューマニストサンセリフ
  • ジオメトリックサンセリフ

スクリプト体

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

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

スクリプト体の種類

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

文字の視覚3要素

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

  • 可読性
  • 判読性
  • 誘導性

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

可読性=読みやすさ

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

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

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

黒猫のアイコン画像黒猫

特に可読性を重視したいのが文章

長い文章に適した書体

文章の可読性比較

小説、新書、論文といった長文を読む媒体には可読性が高くなる下記のような書体がオススメ。

『文章』で読みやすい書体
  • 文字のウェイトが細い書体
  • ハネのある明朝体やセリフ体
  • コントラストが高い配色
  • 文字間、行間がとれた文字組み
可読性が高いフォントや文字組み

見る文字に適した書体

一方で文字を読むわけでなく、見ることの多いプレゼン、アプリ、テロップではゴシック体のほうが可読性が上がります。

目的に合わせた書体の使い分け例
  • 明朝体:文字のみが続く文章を読むもの
  • ゴシック体:文字数が少なく文字以外の情報が多いもの

※ あくまでもこれは『可読性』に限った話です。印象や調和も意識してフォントを選びましょう。

ブログにはゴシック体がオススメ

ブログは『読む』のか『見る』のか判断が難しいところですが、実際のところ多くの人が流し読みです。

視覚性の高いゴシック体のほうが有利と判断してゴシック体を利用しているブロガーのほうが多いですね。

ブログやWebデザインでの文字の読みやすさについては下記記事で詳しく解説しています。

判別性=誤認しにくさ

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

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

判別しにくい文字の例

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

判別性の高い書体
  • 特徴の強い装飾書体やスクリプト体
  • ハネやはらいのある明朝体やセリフ体
  • 色やサイズを変えて判別しやすく加工

誘導性=目に止まりやすさ

誘導性の高い書体
  • 文字のウェイトが高い
  • ゴシック体やサンセリフ体
  • コントラストが高い

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

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

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

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

フォントの勉強

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

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

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

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

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

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

こちらはフォントの教科書といった感じで、タイポグラフィの基本が網羅されています。

内容量が多く、難しいようなこともたくさん書いてあるんですが内容はギッシリ。

本格的にフォントを学びたい人ならこれだけ読んでおけばOKって感じ。本格的にデザイナーを目指すならこれ。

黒猫のアイコン画像黒猫

Kindle版がお安くなってるので超オススメ。ぶっちゃけ1万円出しても後悔しないレベルですね

ほんとに、フォント。

『ほんとに、フォント。 フォントを活かしたデザインレイアウトの本』は多くの人が推奨するだけあり、わかりやすく実践的な内容になっています。

フォントの勉強っていうよりは『実際にフォントを変えたらデザインがどう変化するのか?』『フォントと合わせてレイアウトを良くする方法』が具体例付きでめちゃくちゃわかりやすく解説されている感じ。

フォントを変えたあとの例のセンスもめちゃくちゃ良くて参考になりますよ。

うさぎのアイコン画像うさぎ

こちらは教科書的な感じではなく、実例を見て学ぶ感じなので手っ取り早くスキルアップできる良書です。文字を読むのが苦手な方でもOK!

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

フォントは単品購入やサブスクリプションがありますが、5、10万とかしちゃうんで敷居高めですよね。

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

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

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

Adobe CC未加入ユーザーは学割で買うと安いよ!

もしまだAdobe CCをひとつも契約していないっていう人はPhotoshopもIllustratorもPremiereも全てのソフトが使えるコンプリートプランが学割価格で買えるお得な方法があるので下記を参考にしてみてください。

Adobe公認スクールを介すことで通常購入の正規版と全く同じAdobe Creative Cloudが半額近い価格で買えちゃいます。

知らずに普通に買うとかなり損なので注意。

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


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

よかったらシェアしてね!

コメント

コメントする

目次
閉じる