今日から使えるフォント選びのルール

10年ほど前まではパソコンで使える3桁程度しかありませんでしたが、今では和文フォントだけでも2000を超えるフォントが存在しています。その中には、読みやすいものもあれば読みにくいものもあり、タイトルに向いているものもあれば長文に向いているものもあります。

フォントの使い方次第で、サイトや資料の良し悪しが決まると言っても過言ではないほど、サイトや資料づくりにおけるフォントの重要性は大きいものです。フォントの「視認性」「可読性」「判読性」を高めることを意識して、効果的なフォントを選びましょう。

今回は「視認性」「可読性」「判読性」の説明と、フォント選びの代表的なルールを3つご紹介します。その前に、まずはフォントの基本知識をおさらいしておきましょう。

フォントの基本知識

日本には、大きく分けて【和文フォント】と【欧文フォント】があり、更にその2種類は特徴によって、それぞれ大きく2種類に分けられます。

和文フォント明朝体ゴシック体
欧文フォントセリフ体サンセリフ体
特徴
  • 文字の端にうろこ(セリフ)がついている。
  • 文字の線の太さに強弱がある。
  • 落ち着き、柔らかい、高級感、古風、女性的、アナログ
  • 長文の印刷物(文庫本など)に向いている。
  • 文字の端にうろこ(セリフ)がついていない。
  • 文字の線の太さの差が殆どない。
  • 元気、固い、カジュアル、先進的、男性的、デジタル
  • モニター上できれいに表示される。

文字の読みやすさは3つの要素で決まる

文字の最大の役割は、「言葉を正確に伝達する事」です。この役割を果たすために「文字」をどう扱えば「読みやすく伝えられるようになるか?」を知っておく事が重要です。以下の3つを意識することで、「読みやすさ」を生み出すことができます。

視認性…文字の見えやすさ

視認性とは、文字の見えやすさの度合いを示すもので、見た瞬間に文字と認識できるかどうかのことです。

明朝体は、強弱があるため文字の形を判別しやすく、正確に読めるため、疲れを感じにくい特徴があります。また、横線が細いため、軽やかで明るい印象になります。そのため、長めの文章に使いやすいフォントです。ただし、フォントが小さくなると線の細くなるため、文字が判別しづらくなります。

ゴシック体は、線の太さが均一なので、明朝体に比べてインパクトがあり、目に入りやすい特徴があります。そのため、簡潔に要点を伝える文章やキャッチコピーに使われることが多いフォントです。
また、ある程度小さな文字でも読みやすいため、雑誌の本文や注釈などに使われやすいフォントです。

可読性…文字の読みやすさ

可読性とは、読みやすさの度合いを示しており、文字として認識できるかどうかのことです。文字として認識するとは、パッとその文字列を見たときに、

  • 理解しやすいこと
  • 正確に早く読めること
  • 疲労を感じないこと

上記の3つが必要です。
可読性を考える際は、字体が重要です。例えば、線が多い漢字を使うよりも、ひらがなを使った方が読みやすいでしょう。
例)

  • むずかしい
  • 難しい

ですが、ひらがなばかりだと、だらだら書かれているように見え、逆に読みづらくなってしまいます。適度に漢字を交えて文章を書く方が、可読性はあがります。

判読性…文字の分かりやすさ

判読性とは、文字のわかりやすさの度合いを示すもので、誤読をさせず、正確に文章の意味が伝わるかどうかのことです。

例えば、O(英語のオー)と0(数字のゼロ)の違い、I(英語の大文字アイ)とl(英語の小文字エル)の区別などです。分かりやすくするためには、ゴシック体(サンセリフ体)よりも、文字に強弱がある明朝系(セリフ体)字体を使うとよいでしょう。

また、判読性や視認性を高くするようにデザインされたユニバーサルデザイン書体(UD書体)なるものが、近年数多く開発されています。UD書体は、有料の書体で少々値が張りますが、持っておくと非常に役に立つ書体です。しかし、そこまでフォントにお金をかけれないという方は、Windowsにも標準搭載されていて比較的UD書体に近い形をしている「メイリオ」を使うとよいでしょう。

フォント選びで重要な3つのルール

フォント選びにおいてのルールは数多くありますが、その中でも特に重要な3つのルールをご紹介します。

ルール1 太字に対応した書体を選ぶ

フォントは、「太さ(ウエイト)」によっても印象が大きく変わります。太くなればなるほど、力強く、男性的なイメージ、細くなればなるほど繊細で女性的なイメージになります。

書体の数を増やしすぎると、サイトや資料の統一感が失われることがあります。そのため、同じ書体でいろいろな太さが揃っている書体(「ヒラギノ角ゴ」、「メイリオ」など)を使うとよいでしょう。複数のウエイトの書体をもつフォントファミリーを使いこなせば、統一感のある見やすいサイトや資料が作れます。

ルール2「等幅書体」と「プロポーショナル書体」

「MS 明朝」と「MS P明朝」、「MS ゴシック」と「MS Pゴシック」のように、フォント名に「P」の付くフォントと付かないフォントがあります。「P」は「Proportional(プロポーショナル)」の頭文字で、「釣合った、比例する」といった意味です。

見た目のバランスが文字毎に最適となるように文字の形によって文字の幅が異なるデザインがされているフォントが「プロポーショナルフォント」です。「P」の付かない等幅書体は、読んで字の如く、すべての文字が同じ文字幅でデザインされている書体で等幅書体で英文を書くと、可読性が著しく低下します。

余計なスペースが多く、文がぶつぶつに切れている印象になるので、英文に等幅フォントを用いるのは、なるべく避けましょう。

ルール3 英文には欧文フォント、和文には和文フォント

日本語フォントで英単語を書くと可読性が下がる場合があります。(特に「MSゴシック」、「MS明朝」)なので、和欧混植の文章では、欧文部分は欧文フォント、和文部分には和文フォントを使うようにしましょう。

いちいち設定を変えるのが面倒な場合は、比較的にアルファベットも美しく作られていて、和文との相性も良い「メイリオ」や「ヒラギノ角ゴ」、「小塚ゴシック」などを使うと良いでしょう。

和文部分がゴシック体なら、その和文の中の英単語はサンセリフ体のフォント(「Segoe UI」、「Arial」、「Corbel」など)日本語が明朝体なら、英単語はセリフ体のフォント(「Times New Roman」、「Adobe Garamond」など)を合わせるとよいでしょう。

しかし、ゴシック体×サンセリフ体、明朝体×セリフ体の組み合わせであれば、どんなフォントでも良いわけではありません。英単語だけが目立ったり、英単語だけが目立たなかったりしたら可読性は低下します。

和文フォントと欧文フォントを組み合わせるときに考慮すべきなのは、以下の3点です。

  • 雰囲気が似てる
  • 太さが似ている
  • サイズが似ている

雰囲気は似ているけど、太さが合わない(アルファベットが細く見える)場合や、サイズが合わない(アルファベットが小さく見える)場合は、アルファベットだけ個別に太さを変えたり、文字サイズを大きくして対応してもよいでしょう。

まとめ

頑張って作った作品や資料が、「何だか文字が分かりづらいな、読むのやめとこう。」このように判断されて見てもらえないのは、非常にもったいないことです。1人でも多くの方に情報を伝えられるように、今回ご紹介したフォント選びのルールを参考に、可読性、視認性、判読性の高いフォントを選ぶよう心掛けましょう。

このエントリーをはてなブックマークに追加

筆者

S.Yamaguchi

Bigmac制作部で、主にWebデザイン兼コーディングを担当しています。 シンプルでフラットなデザインが得意です。 好きな飲み物はカフェオレで、夢はクラゲを飼うことです。
 座右の銘は、「ケセラセラ(なるようになるから流れるままにいこう)」 休日は、海外ドラマかアニメを見ています。 最近、髪をばっさり切って小さいきのこになりました。 どうぞ宜しくお願いします。

筆者が最近執筆した記事