フォント選びで印象はどう変わるか | デジタルラボ金沢

先に結論を書くと、フォント選びで変わるのは**「何が書いてあるか」ではなく「どんな態度で書かれているか」**です。同じ「本日休業します」という一文でも、丸みのある書体なら親しみやすく、細い明朝体ならあらたまった印象になります。内容は一字も変わっていないのに、受け取りかたが変わる。ここがフォントの効くところです。

そのうえで、初心者がまずやるべきなのは「かっこいい書体を探すこと」ではありません。書体の数を減らして、役割ごとに固定することです。順番に見ていきます。

ゴシック体と明朝体、まずはこの2つ

日本語の書体は種類が多いのですが、最初は大きく2つに分けて考えると迷いにくくなります。

ゴシック体：線の太さがほぼ均一。遠くからでも読みやすく、はっきりした印象。看板・見出し・スマホの画面などでよく使われます
明朝体：線に太い部分と細い部分があり、はらいがある。長い文章を落ち着いて読ませたいときや、静かな・伝統的な雰囲気を出したいときに向くとされています

欧文でいえば、ゴシック体に近い立ち位置がサンセリフ、明朝体に近いのがセリフです。セリフというのは文字の端についた小さな飾りのことで、これがあるのがセリフ体、無い（sans = 無い）のがサンセリフ体です。

どちらが優れているという話ではなく、伝えたい態度に合うほうを選ぶだけです。カジュアルな案内ならゴシック体、あらたまった挨拶文なら明朝体、といった具合に決めていきます。

書体より先に効くのは、太さ・大きさ・余白

意外に思われるかもしれませんが、印象への影響が大きいのは書体の種類そのものより、同じ書体をどう使うかのほうだったりします。

たとえば同じゴシック体でも、太字にすれば強くはっきりした印象になり、細字にすれば軽く上品な印象になります。文字を大きくすれば元気に、行間を広くとれば落ち着いて見えます。書体を探しに行く前に、手元の書体で太さと大きさを変えてみると、それだけで解決することがよくあります。

見出しと本文の差をつけたいときも同じです。書体を変えて差をつけるより、大きさと太さで差をつけるほうが失敗しにくいです。書体を2種類混ぜると、それぞれの持つ雰囲気がぶつかることがあるためです。

このあたりの考えかたは見やすいデザインの基本。4つの原則から始めるの「対比」「反復」とそのままつながっています。

使う書体は1〜2種類にしぼる

作り慣れていないうちほど、いろいろな書体を試したくなります。ですが1枚のなかで書体が3種類、4種類と増えると、まとまりが無くなり、内容よりも書体のほうが目に入ってきます。

決めかたとしては、次のどちらかで十分なことがほとんどです。

1種類で通す：本文も見出しも同じ書体にして、太さと大きさだけで差をつける。もっとも失敗しにくい
2種類まで：見出しに1つ、本文に1つ。たとえば見出しはゴシック体、本文は明朝体、というように役割で分ける

大事なのは、決めたら同じ役割には毎回同じ書体を使うことです。ページごとに見出しの書体が違うと、読む人は毎回「これは見出しなのか」と考えることになります。

Webで使うときに気をつけたいこと

紙と違って、Webページの文字は読む人のパソコンやスマホ側で表示されます。ここが紙との一番の違いです。

自分の端末に入っている書体が、相手の端末に入っているとは限りません。指定した書体が無ければ、別の書体で表示されます
CSSの font-family には、候補を複数書いておくのが一般的です。左から順に、使えるものが選ばれます
Webフォント（サーバーから書体データを読み込ませるしくみ）を使えば端末によらず同じ書体で表示できますが、日本語は文字数が多いぶんデータが重くなりやすく、表示が遅れることがあります

書体データの配布サービスは、利用できる範囲や条件がサービスごとに違い、変わることもあります。商用サイトや印刷物に使うときは、そのつど配布元の説明を確認してから使うのが安全です。ここは推測で判断しないほうがよい部分です。

また、画面の幅によって文字の見えかたは変わります。パソコンでちょうどよい大きさが、スマホでは大きすぎたり小さすぎたりします。この点はスマホ対応（レスポンシブ）はなぜ必要なのかでも触れました。CSSでの指定のしかたはHTMLとCSSで何ができるのか、最初の全体像が参考になると思います。

迷ったときの決めかた

最後に、選びきれないときの手順をまとめます。

読む人と場面を先に決める（誰が、どこで、どんな気分で読むか）
ゴシック体か明朝体か、大きく2択にしぼる
その中から読みやすいものを1つ選び、まず1種類で全部作ってみる
差が足りないところだけ、太さと大きさで調整する
それでも足りなければ、見出し用にもう1種類だけ足す

選んだものが合っているかは、実際に文章を流し込んで少し離れて眺めると判断しやすくなります。見本の「Aa」だけで決めると、本文にしたときの印象がずれることがあるためです。

まとめ

フォントが変えるのは内容ではなく「どんな態度で書かれているか」
まずはゴシック体か明朝体か、大きく2択で考える
書体の種類を増やすより、太さ・大きさ・余白で差をつけるほうが失敗しにくい
使う書体は1〜2種類。同じ役割には同じ書体を使う
Webでは相手の端末で表示される。候補を複数書いておく
配布サービスの利用条件は変わることがあるので、使う前に配布元を確認する

書体は好みが出るところなので、自分ひとりで見ていると迷いが長引きがちです。人に見比べてもらうと数分で決まることもあります。デジタルラボ金沢は初心者からOK・一人一人が主役という考えかたでワークショップや勉強会を開いていますので、気になった方はお問い合わせからどうぞ。