前回の記事で、
ウェブサイトやブログを作ったら、まずフォントを指定してほしい理由をお話ししました。

でも具体的に何を選べばいいのか、判断基準がほしいですよね。

この記事では、フォント(書体)を大まかに分類し、基本となるフォントの印象をご紹介します。

フォントごとの印象を知って、ぜひウェブサイトづくりに活かしてくださいね。
 

フォント選びの目安

フォントを選ぶ際に最低限知っておきたい知識

これからご紹介することは少し専門的に感じるかもしれませんが、中学校美術の内容です。
そんなの記憶の彼方…という人もいるかもしれませんね。

ご安心ください。

中学生、しかもだいたいが中学1年生で学ぶ内容なので、難しくないはずです。「義務教育の範囲内でこんなことを習っていたんだなぁ」なんて思い出しながら、楽な気持ちで読んでください。そして、難しそうという先入観もなくして、読んでみてください。
 

フォントの超基本知識

フォントを選んだり指定したりする際に必ず知っておきたい超基本の2種類があります。

それはこの2種類です。

  • 明朝体
  • ゴシック体
  •  
    ただし、これは日本語のフォントに対する分類ですので、欧文(アルファベットや数字)の場合はこのような呼び方になります。

  • セリフ体
  • サンセリフ体
  •  
    ただ、和文でも欧文でも、分け方は同じです。
     
    ポイントは、線の太さと、それぞれの線の端っこです。

    違い1 : 線の太さ

    明朝体・セリフ体は、縦線と横線の太さが異なります。

    これはカリグラフィーが元になっているためです。

    ※カリグラフィーって何?という人は
     Youtubeで見てみましょう。

    筆の動きに注目です。太くなるところと細くなるところがあるのが特徴です。

    一方で、ゴシック体・サンセリフ体は太さがほとんど同じですよね。

     

    違い2 曲がり角や点、はらいの形

    文字の曲がり角や線の端っこが、変わった形をしています。

    このパーツのことを和文では「ウロコ」、欧文では「セリフ」と言います。

     

     
     
    ゴシック体・サンセリフ体にはこれがありません。
     

     
     
    セリフがないので、
    サン(ない)セリフ(ウロコ)体、という名前なのです。

    フォントの基本の違いを学習しましたので、ここからは、それぞれの印象の違いをみていきましょう。



    明朝体の印象

    個人差はありますが、明朝体はゴシック体に比べると真面目な印象を与えます。

    セリフ体(明朝体)の方が歴史ある書体

    セリフ体(明朝体)から真面目な印象を受ける理由の一つが、できた時代の差にあると考えられます。
    時代を比較するときにより分かりやすいのがセリフ体・サンセリフ体の違いです。

    セリフ体のほうが書体としては先に完成しています。

    つまり、サンセリフ体のほうが新しくできた書体です。19世紀初頭の、印刷技術の発展と共に生まれたと言われています。
    (詳しく知りたい人は、書体の歴史がしっかり書かれた「欧文書体百花事典」がおすすめです)

    欧文書体百花事典普及版 [ 組版工学研究会 ]

    価格:9,504円
    (2017/12/26 13:30時点)
    感想(0件)


     
     
    さて、話を戻します。

    その頃は今ほど識字率の高くなかったため、文字を使う人たちは自然と知識階級の人たちになります。したがってその内容も、公的な文章や学術書、文学などが主です。
    さまざまな文の溢れている近代からすると、これらはかなり難い内容ですよね。そのため、難い文書に使われている書体=真面目な印象というようにつながり、それが受け継がれ、今の印象になっている…という説でがあります。普段目にする使い方によって自然と印象が染み付いているのですね。

    もしかしたらそれだけでなく、書体の細部から歴史や伝統感を無意識に感じているのかもしれません。

    ちなみに、最古のセリフ体といわれている書体は、トラヤヌス帝の碑文に使われている「Trajan」です。15世紀には誕生していたようです。このように、セリフ体は、ローマで生まれた文字なので「ローマン体」とも言われます。石に刻まれていたと思うと、歴史を感じますね。

    ※もっと詳しい説明は…
    こちらのブログへ。

    明朝体の微妙な違い

    さて、真面目な印象を与えやすい明朝体ですが、太さや細部を変えることで、与える印象を少し変えることができます。(このような、同じ書体だけれど太さや傾きが違うというものをファミリーと呼びます。)

    細い明朝体

    かなり繊細な印象を与えることができます。いわば、無垢で美しく、儚い。

    基礎化粧品などの清潔感が求められる場に用いられることもありますね。

    中くらいの太さの明朝体

    これはおそらく、みなさんにとって馴染みのある印象だと思います。教科書や小説、辞書、新聞などの身の回りの出版物で見かけます。

    特に知的な印象を与えるものに多いのではないでしょうか。契約書や内定書などの会社の真面目な書類にもぴったりです。

    太い明朝体

    太い明朝体は力強さがあるので、少し強めの口調に感じます。マンションなどの高価な商品の広告の見出しにも多いです。

    そのため、善意に呼びかけるような「譲り合って○○しましょう。」というような内容のときに使うと、少し強すぎる印象を与えてしまうかもしれません。
     

    おまけ1 丸明オールド

    これは少し触れておきたいので挙げた書体です。

    種類としては明朝体なのですが、文字のはじめと終わりの「ウロコ」が丸い作りになっているのがお分かりでしょうか。
    そのため、真面目な印象に感じられる明朝体でありながら、少しやわらかい印象も与えられます。
    ちなみに、もともとは水にとてもこだわったビールの広告のために作られた書体です。

    ただ、この書体は有料書体です。(お金を払って購入するのです)ウェブフォントではないので、今回の記事的にはあまりおすすめできません。
    web以外の使用のために購入したいという方はこちら

    おまけ2 知らなくてもいい明朝体の情報

    明朝体は、小中学校の国語の教科では、必ず使わなければならない書体のようです。なぜなら国語では、漢字の指導でトメ・ハネ・ハライに気をつけて書くようにと口を酸っぱくして言っていますよね。ゴシック体のようなセリフのない書体では、ハライなのかトメなのかが分かりにくいです。
    そのため、国語の授業プリントやテストでは、明朝体を使うのが暗黙のルールのようになっているそうですよ。

    さて、次はゴシック体です。



    ゴシック体ってどんな印象?

    ゴシック体は明朝体とは逆に、親しみやすさがあります。また、使い方を気をつければ、ニュートラルな印象にもなります。太さが変わると印象が変わるのがゴシック体の面白さです。

    細めのゴシック体は白が似合う

    細いゴシック体は、清潔感や、洗練された印象を与えられます。身近な例を挙げますと、MacやiPhoneでおなじみのApple社がCMに使っていますね。病院系も、看板を細めのゴシック体のロゴにしているところが結構あります。

    太めのゴシック体は強さ

    太いゴシック体は、力強さがあり強い口調のような印象を与えます。

    どーん!とした存在感があるので、広告の見出しとしてそのまま使うのはもちろん、主張の激しい広告ではフチの色を変えたりキラキラさせたりした、かなり太めのゴシック体となって使われています。

    一方で、太いゴシック体でも、小さな文字サイズで少し文字間を広げて使うと、こども向けっぽくなります。

    Eテレのピタゴラスイッチや2355などでおなじみの佐藤雅彦さんは、この使い方がとても上手です。また、さまざまなhtmlやCSSの装飾を紹介しているサルワカさんも、ゴシック体の使い方がとても上手です。

    そんなふうに「このサイトいいなぁ」というところを見つけたら、文字間と行間をまねしたいときはよく観察することが大切です。

    中くらいの太さのゴシック体はニュートラル

    中くらいの太さのゴシック体は、割とニュートラルです。強すぎたり弱すぎたりせず、真面目すぎたり可愛すぎたりという偏りもなく、ゴシック体らしい読みやすさも発揮できます。

    代表的な例が、駅名表記や道路標識などの公共設備での利用です。この辺りは詳しく調べれば調べるほど、面白いことがわかります。海外の空港で使われている書体も、検索すると出てきますよ。

    おまけ 知らなくてもいいゴシック体の情報

    世の中には、明朝体を字として識別しにくい人もいるそうです。しかしなぜかゴシック体は字として識別しやすいんだとか。そのため特別支援学校では、先にご紹介した国語の教科とは逆に、ゴシック体でプリントや掲示物を作るほうがいいそうです。(可愛らしさもあるため、丸ゴシックが人気らしいです。)

    このような面からも、ゴシック体は多くの人が読みやすい書体だと分かりますね。

    ちなみに横線が細いということを克服し、ユニバーサルフォントとしてつくられた書体もあります。

    モリサワフォントの「UD黎ミン」は、

  • 文字のかたちがわかりやすいこと
  • 読みまちがえにくいこと
  • 文章が読みやすいこと
  • をコンセプトにつくられたそうですよ。

    まとめ

    いかがでしたか?

    この記事では超基本しかご紹介していませんが、自分が作りたいwebサイトはどういう印象にしたいかを考えると、明朝体・ゴシック体のどちらが良さそうかはイメージできたのではないでしょうか。

    もっと詳しく知りたい人は…

    書体について興味が湧き、もっと詳しく知りたいと思った人は「小林章」さんの書籍を読んでみることをおすすめします。(この本は特におすすめです。)

    欧文書体 その背景と使い方 (新デザインガイド) [ 小林章 ]

    価格:2,700円
    (2017/12/26 14:34時点)

    まちモジ 日本の看板文字はなぜ丸ゴシックが多いのか? [ 小林章 ]

    価格:2,160円
    (2017/12/26 14:33時点)

    例えば、「格式高い場に使われていた書体はどんな書体なのか」を調べれば、格式高い内容のブログに似合った書体を設定できます。アメリカの文化を紹介するブログなら、アメリカで生まれた書体を使ったほうが、よりアメリカらしさを演出できます。

    何も知らずに感覚だけで書体を選んでいると、どこかで不安があると思います。そう思ったら調べるチャンスです。使おうと思っている書体がどこの国でいつごろ生まれたのか、どんなときに使われていた歴史がある書体なのかを、調べてみてください。