皆さんは「フォント」や「フォントサイズ」はどうやって選んでいますか？
「このフォントかわいい！」または「このフォントかっこいいから、サイズは大きめに！」のような選び方をしている方も多いかもしれません。
この記事を読むことで、どのようにフォントやフォントサイズがデザインに関係しているのか、今後どのように選んでいけばいいのかがわかるように現役のWEBデザイナーが解説しています。
- デザイナー入門・初心者の方
- フォントに興味がある方
- フォントの選び方にお悩みの方
- 適切なフォントやサイズの選び方がわからない方
モグモグさん
フォントやフォントサイズはデザインにおいて大きな役割があるよ！
ロジカルに選ぶことで目的のデザインを作ることに繋がる。
フォントの種類の基本
まずはフォントの種類から解説していきます。
日本語のフォントは大きく分けて、「明朝体」と「ゴシック体」の２種類に分けることができます。
明朝体（英語フォントでは「セリフ体」）
明朝体は横線に対して縦線が太く、横線の右端、曲がり角の右肩に三角形の山（ウロコと呼ばれます）がある書体のことを言います。
英語フォントの場合は、明朝体ではなく「セリフ体」と呼ばれます。
明朝体は、文字の強弱が強いため、文字１つ１つの形がはっきりしているのが特徴です。
例えば、新聞の文字や、小説の文字など、長文で書かれているものは明朝体が使われていることがあります。
明朝体は、長文にした時でも読みやすく、疲れにくいと言われています。
（明朝体例）
（セリフ体例）
明朝体が与える印象は、大人っぽい、高級感、綺麗め、真面目、和風などがあります。
サイトなどを見ていても「このサイトなんとなく大人っぽくて綺麗だな」と感じる場合は、明朝体が使われている、なんて言うことも少なくないです。
ゴシック体（英語フォントでは「サンセリフ体」）
ゴシック体は、文字の縦横の太さが均等で、ウロコがついていないフォントであることが特徴です。
ウロコは明朝体にあった、曲がり角の右肩に三角形の山のことです。
装飾性がないため、シンプルで視認性に優れているのがポイントです。
ゴシック体は遠くからでも見やすいので、
看板や地図、会社でのプレゼン資料などで使用されていることが多いフォントです。
（ゴシック体例）
（サンセリフ体例）
ゴシック体が与える印象は、シンプル、モダン、親近感、ポップさなどがあります。
身近なものにゴシック体がよく使われていることも多いので、探してみて、どんな印象を与えることができるのか考えてみるのも勉強になります。
その他のフォント
基本的には、上記で紹介した「明朝体（セリフ体）」と「ゴシック体（サンセリフ体）」の２種類が多く使用されてますが
その他にも「筆記体（スクリプト体）」や「デザイン書体」なども、使用されることがあります。
「筆記体（スクリプト体）」は、筆で書かれた流れるようなフォントのこと、「デザイン書体」は、手書き文字や個性的なフォントのことを指します。
これらのフォントたちは、視認性に優れていないため、デザインするものや、魅せたい世界観に合わせて使用することをおすすめします。
フォントの役割
フォントはただ好きなものを選ぶだけではなく、上記で説明したようにそれぞれが持っている特徴や、見る人に与える印象が異なります。
それらの特徴や印象を理解した上で、デザインを見た人にどう感じて欲しいかを基準に選ぶことが大切です。
モグモグさん
実際のサイトを見てみよう！
例えば、こちらのサイトを見てみてください。
参考：藤次郎株式会社 様
「日本を代表する刃物産地、新潟・燕三条で伝統と革新を融合させた刃物を製造」している会社の「藤次郎株式会社」様のサイトです。
ここでは、明朝体が使用されていることがわかります。
このサイトで明朝体を使うことによって、「高級感」や「上品さ」「美しさ」などの印象を与えています。
次はこちらのゴシック体を使ったサイトを見てみましょう。
参考：株式会社メルカリ 様
こちらのサイトは、株式会社メルカリ様のサイトです。
全体的にイラストもあって可愛らしくポップな印象ですね。
そこに「ゴシック体」での文字が配置されていることによって、全体に統一感が生まれます。
このイラストの中にもし「明朝体」のフォントが配置されていたとしたら、きっと全体的に統一感がなくなってしまい、ポップさや可愛さが伝わらない可能性もありますね。
モグモグさん
このように、色々なサイトをみて、
どんなフォントが使われているのか、そのフォントがそのデザインに対してどんな印象を与える役割をしているのかを考えてみるのもとても勉強になります！
フォントサイズの選び方
続いて、フォントサイズの選び方について解説します。
デザインをしていく中で、こういう悩みが多いと思います。
- 「どのようにフォントのサイズを決めたらいいのかわからない…」
- 「大きすぎても小さすぎてもバランスが悪くなる…」
実はフォントサイズは、「そのデザインをみるひとの年齢」や「デザイン」、「紙媒体なのかWeb媒体なのか」などの要因によって見やすさの基準が変わり、正しいルールなどは存在していないため、判断がとても難しいとされています。
モグモグさん
本文に使うのか、見出しやタイトルに使うのかによってもフォントのサイズが異なるよ！
ここでは、本文に使う場合の最適なフォントサイズをご紹介！
Web媒体の場合
Webの場合は、GoogleやAppleなどの大手企業が推奨しているフォントサイズがあります。
- Google：基本フォントサイズ16px
- Apple(iOS)：最低フォントサイズ11pt（約14~15px程度）
上記のことから、一番小さくても本文に使用するフォントサイズは14~16pxが最適であるとされています。
しかし、子供向けのデザインや高齢者向けのデザインなどでは、14~16pxだと小さすぎる場合もあります。
こちらで紹介したのは一般的にWeb上で見やすいとされている最低フォントサイズなので、あくまで目安と捉え、適宜調整をしてデザインをしていくことがポイントです。
紙媒体の場合
一般的には8~10ptが最適とされています。
こちらも本文に使う場合の最適サイズではありますが、誰に向けてのデザインなのかを考えながら、調整してデザインするのも大切です！
先ほど述べた通り、正解とされているフォントサイズはないため、あくまで目安としてデザインに活かしていきましょう。
フォントを読みやすくするための工夫
ここまでフォントの基本やフォントサイズについて解説してきましたが、
フォントを読みやすくするための工夫についてのポイントを3つ解説していきます。
- 行間を調整する
- 文字間隔を調整する
- 文字のジャンプ率を意識する
モグモグさん
それぞれ詳しく解説します！
1.行間を調整する
フォントを見やすくするポイントの１つとして「行間を調整する」ことが挙げられます。
行間とは、行と行の間の余白のことです。
行間が詰められている（狭い状態）だと、文字と文字がくっついてしまってとても読みづらくなってしまいます。
かといって、逆に行間があきすぎ（広い状態）でも、文字の繋がりがわかりにくく、読みづらい文章になってしまいます。
行間は基本的には、フォントサイズよりも広めにとることが大切です。
そのため、1.5~2.0くらいの行間を使われることが多いです。
行間が少し広ければ余白があってスッキリして見えることもあるので、デザインするときには少し意識してみましょう！
2.文字間隔を調整する（カーニング）
２つめは、文字と文字の間の余白である「文字間隔を調整する」ことです。
カーニングと呼ばれることがあります。
こちらも、行間のように、文字と文字の間が狭すぎや、広すぎでも読みづらくなってしまいます。
狭すぎず、広すぎず、文字間隔を調整することで、一気にデザインがされた感で文字が読みやすいデザインへと変わります！
Webサイトの場合では、文字サイズの5%~10%程度の文字間が読みやすいとされているので、調整しつつ、魅せたいデザインを作ってみましょう！
文字詰めについてもっと知りたい方はこちらのYoutube動画がとても参考になるので是非みてみてください！
モグモグさん
文字詰めはかなり奥が深く、慣れるまで、スキルを取得するまでは練習あるのみ！
綺麗な文字組みのデザインを見て常日頃から勉強していこう。
3.文字のジャンプ率を意識する
「文字のジャンプ率」とは、デザイン上のフォントサイズの比率のことを指します。
ジャンプ率は高いから良い、低いから悪い等ではなく、デザインで見せたい効果によっても異なります。
ジャンプ率について画像を用いて解説していくので、しっかり理解した上で、正しくジャンプ率を使って見せたいデザインに近づけてみましょう！
まずは「ジャンプ率が高い場合」についてです。こちらは、大きいタイトルの文字に対して、本文テキストが小さいことがわかります。
しかし、一方「ジャンプ率が低い場合」は、全体の文字が同じサイズになっていることがわかります。
このように、文字同士の要素を意識して、ジャンプ率を設定すると、メリハリが出て、伝えたいことが瞬時に伝わるデザインにすることができます。
ジャンプ率が高い場合でのデザインは、主にバナー広告や、チラシなどの文字をしっかり読まなくても瞬時に伝えたい情報を伝えることができるような媒体に多く使われています。
ジャンプ率が低い場合でのデザインは、文章を読んでもらいたいと思うものに使われることが多く、主に専門雑誌や、フォーマルな場でのメニュー表などで使われていることがあります。
見る人にどんな情報をどのように伝わって欲しいのかを考えながらジャンプ率を意識すると、読みやすい、分かりやすいデザインにすることができます。
商用利用可能で無料のフリーフォントのサイト紹介
フリーフォントの中でも、商用利用ができない場合などがあるのでダウンロードする際には気をつけたいところです。
ここで紹介するフリーフォントサイトでは、商用利用可能で無料でダウンロードできて、種類も豊富です！
ぜひデザインをする際に使ってみてくださいね！
GoogleFont
誰もが知っているGoogleから出ている「GoogleFont」では、さまざまな種類のフォントをダウンロードして商用利用することが可能です。
明朝体やゴシック体以外にも、筆記体やデザイン書体まで幅広く取り揃えています。
どちらかというと日本語フォントは少ない印象ですが、英語のフォントはとても種類があるのでみているだけで楽しめるフリーフォントサイトです。
AdobeFont
Adobe製品を使っている人なら知っているはずの「AdobeFont」をご紹介。
こちらはAdobeアカウントを持っていることが前提ですが、アカウントにログインした状態でAdobeFontからフォントを選び、アクティベート化すると、同じアカウントでログインしているAdobeツールでそのフォントが自動的に使用できるという優れもの！
ダウンロードして、フォントをアップロードして…などの面倒な手順が不要なのも特徴です！
こちらも種類がかなり豊富で、筆記体もデザイン書体もあるので、フォントを見ているだけでこんなデザインがしたい！とアイディアが湧いてくるかもしれません。
まとめ
フォントの世界は奥が深くて、ハマってしまうとフォントの美しさに見惚れてしまいます。
世の中に溢れているデザインを意識してみると、どんなフォントが使われていてどんな印象を与えているのか、新しい発見をすることができるので、是非周りのフォントを見てみてくださいね！
モグモグさん
フォントを意識し続けていくと、絶対フォント感が身につけられるかも？！
