フォントの選び方

文字をテーマにした、文字についての情報サイト『ホントのフォント』。最新フォントやイベント情報をはじめ、書体の歴史やフォントデザイナー、開発物語など、様々な情報やニュース、新作情報をご紹介します。

可読性を重視した読みやすいフォントとその設定例

フォントの選び方

可読性を重視した読みやすいフォントとその設定例

2017年10月10日

さまざまなビジネスシーンにおいて、提案書類や配布資料、契約書やメールなど多くの文章を扱う機会があります。このような文字を読んでもらいたい場合や相手へと情報や意思を伝えたい場合には、フォントの読みやすさ、つまり可読性は非常に重要になります。

フォント(書体)の選択はシーンや製品、印象を大きくデザインします。
読んでいる時にストレスを与えてしまうと、その時だけではなく、その後も読む事を避けるようになり、相手へ与える印象も決して良いものではなくなります。

ここでは、どのようなフォントが読みやすいのか、そして読みやすいフォントを選択した際に、その属性(色・サイズなど)をどのように設定したらさらにその可読性が上がるのかをご紹介していきます。

読みやすいフォントを選択して、気持ちよく読んでいただけるようにフォントからデザインしていきましょう。

1、読みやすいフォントとは?

はじめに、どのようなフォントが読みやすいのでしょうか。ここではまず文章を読む際に読みやすいフォントについてご紹介していきます。

実際のデザインに左右されることも多いため一概には言うことは難しいですが、可読性が高いという意味での読みやすいフォントとは、以下の2つの要素を満たしているものになります。

  • フォントが細すぎず、太すぎない
  • 和文ではゴシック体よりも明朝体、欧文であればサンセリフ体よりもセリフ体

特に1つ目の「フォントが細すぎず、太すぎない」という点が非常に重要です。和文と欧文を見比べてみましょう。

(1)読みやすい和文フォントとは?

読みやすい和文フォントは、最初にご紹介した法則に乗っ取ると、「フォントが細すぎず、太すぎない明朝体」、つまり太さの中間である普通の太さ(レギュラーやRegularなど)が、誰にとっても読みやすいと言えます。

見比べてみましょう。


右側の方が長い文章を読みやすいことがわかります。

画像を見て気づいた方もいるかもしれません。

確かに書籍などを読む場合には、このセオリー通り「明朝体」がストレス無く読むことが出来る可読性の高いフォントとなります。「明朝体」は、昔から活版印刷の印刷用書体として長年使われてきたため、私たちの目に馴染んでいることも理由の1つです。
一方でパソコンやスマートフォンなどのスクリーン上においてはどうでしょうか。国内のオンラインの小説サイトや、多くのブログサイトでは「ヒラギノ角ゴシック」や「メイリオ」、「游ゴシック体」などの「ゴシック体」が指定されている傾向があります。近年高解像度のディスプレイが一般的になり「明朝体」は潰れてしまうこと無く、美しく描写することができるようになりましたが、明朝体特有の“ウロコ”が無く、すっきりして見えることから「ゴシック体」が読みやすい書体として認知されています。

読みやすさを維持するために、使う場所によってフォントを変更しましょう。ここでは、いくつか読みやすいフォントをご紹介します。

①ヒラギノ明朝・ヒラギノ角ゴシック

どちらもOS XやiPhoneなどのiOSに標準搭載されているフォントの一つです。印刷物に使用する場合の本文はヒラギノ明朝、スクリーン上であればヒラギノ角ゴを使用するのが良いでしょう。

②游明朝体・游ゴシック体・メイリオ

游ゴシック体はOS X (10.9〜)、Windows (8.1〜)どちらでも導入されているフォントです。ウェブデザインでは、CSSで指定すれば両環境で同じフォントを使えるため、近年使われることが多くなってきました。

メイリオはWindows Vistaのシステムフォントとして開発されたゴシック体です。縦横比が95:100でデザインされ、横組みでの可読性を重要視した視認性の高いフォントであるため、現在でも読みやすい書体として根強い人気があります。

印刷物を制作する際には、小説を組むことを目的に開発されたスタンダードで美しい「游明朝体」をおすすめします。

(2)読みやすい欧文フォントとは?

続いて、読みやすい欧文フォントとはどういったものを指すのでしょうか。

和文の明朝体は、欧文では「セリフ体」と言います。“セリフ”とはフランス語で“飾り”を意味しています。一方でゴシック体は「サンセリフ体」(サンは〜が無いの意味)と言います。和文に習えば可読性の高い欧文フォントは「セリフ体」になります。

こちらも和文と同じで書籍などに関しては「セリフ体」が読みやすさでは勝りますが、スクリーン上においては和文同様「サンセリフ体」が好まれる傾向があります。

米国では実は読みやすさのテストなどが行われており、書籍などに関してはセリフ体が圧倒的だったのに対し、Eメールなどのセールスレターでより反応が高かったのはサンセリフ体でした。

和文と同様に細すぎず、太すぎないフォントを選ぶようにしましょう。標準の太さはRegularやRomanと呼ばれ、多くのフォントの中間の太さとなっています。また書体によってはBookと呼ばれる本文用のフォントもあります。

①Times New Roman・Century・Garamond

Times New Romanはタイムズ紙が新聞用書体として開発したのセリフ体で、現在でも一般的なセリフ体としてよく使われます。ほかにもOSに標準搭載されていることが多いCenturyやGaramondなどの定番セリフ体も試してみてはいかがでしょうか。

ただしアプリケーションやソフトウェア側で太字や斜体にしようとすると、疑似斜体や疑似太字がパソコン上で表現されてしまいます。あくまで機械的に処理したものなので見た目が美しくありません。太字にしたい場合はBold体を、斜体にしたい場合はItalic体を使うようにしましょう。

②Helvetica・Arial・Segoe UI

スクリーン上であれば、サンセリフ体であるとこの項目の冒頭でご紹介しましたが、サンセリフ体の中でも広く普及しているフォントがおすすめです。OS XやiPhoneなどのiOSにHelvetica、Windows用にArialやSegoe UIなどを指定すると読みやすい本文に仕上がります。

③Noto Serif・Noto Sans

GoogleとAdobeが共同で開発した多言語フォントで、明朝体はNoto Serif、ゴシック体はNoto Sansです。どちらもオープンソースフォントですので、無償で利用可能です。

尚、日本語のフォントファイルは基本的にファイルサイズが大きく、表示させるまでに時間がかかるため、ウェブページで使う場合は注意が必要です。

(3)読みやすさを重視する際に避けたいフォントとは?

反対に読みやすさを重視する際に避けたいフォントとは、今回読みやすいフォントとして指定したものとは逆の属性を持つフォントスタイルを指します。
この場合に読みにくいとされるのは、「太字のゴシック体」または「太字のサンセリフ体」です。

どちらも存在感を放つので、タイトルや見出し、標識、看板など文字を大きく使う場面では活躍する一方で、小さい文字や長い文章に使用すると読み手が疲れてしまうのです。

2、読みやすいフォントの属性を確認しよう

読みやすいフォントがどういったものなのかを確認することが出来たら、次は読みやすいフォントの属性を確認しましょう。

(1)読みやすいフォントの色

Web上で読みやすいと言われているサイトの黒は、実は真っ黒ではありません。完全な黒だと、これもまたフォントの時と同じく目が疲れてしまうのです。

読みやすいサイトで利用している黒は完全な黒(#000000)ではなく、ダークグレー(#1e1e1eなど)が使用されています。比べてみましょう。

見分けが付きますか?背景の白地に対してコントラストが若干弱まるため、右の方が若干柔らかい印象を持っています。非常に細かい違いかもしれないですが、ちょっとした色の気遣いも、読んでいると疲労の違いとして明確に現れてきます。

米国大手のGoogleやFacebook、Amazon、Yahoo!なども確認してみると、文字色には#222222〜#555555までの完全な黒を使用しているわけではないことが確認出来ます(2017年9月地点での調査)。


フォントサイズが大きいものほどより黒い黒を、フォントサイズが小さいものには薄い黒を使用するとより読みやすくなります。

(2)読みやすいフォントサイズ


誰が読むかによってフォントサイズを考慮することも大切です。

ウェブページでは年齢問わず読みやすいフォントに設定しておきたい場合、本文は13〜17px程度が良いとされています。過去にはフォントサイズを小さくして使うことが多かった時代があるため、少々大きく感じる方もいらっしゃるかもしれませんが、文字が小さすぎると年齢層が高い方に関しては読むことが出来ずにストレスになりますし、指定したフォントによっては文字もつぶれて表示されてしまうのであまりおすすめできません。

逆にあまり大きいフォントを使用してしまうと見出しなどと区別がつかなくなってしまうので文章に緩急をつけることが出来ず、これもまた読み手が疲れてしまう原因の一つになってしまうのです。

(3)読みやすいフォントの文字間隔

読みやすさを追求する上で語らなければいけないフォントの要素はもう一つ、それはフォントの文字間隔です。

フォントの文字間隔のことを、英語で「カーニング」、日本では「文字詰め(字詰め)」と呼ぶこともあります。隣り合わせとなる文字同士が離れすぎたり、広がりすぎたりしてしまっていると読みにくくなり違和感が出ます。この違和感は、文字を詰めることで解決します。

近年プロ用の有料フォントには、フォント内部にカーニング情報を持っており、自動で文字間隔が調整される便利なフォントがあります。カーニング情報を持っていないフォントは個別に文字詰めをすると良いでしょう。

ちなみに各OS標準装備のものだと、游ゴシック体やヒラギノ角ゴシックなどは自動カーニングが適応されますが、メイリオやMS明朝・MSゴシックのフォントはされません。

ちなみに豆知識としてご紹介すると、カーニングや文字詰めとは別にトラッキングというものが存在します。個別で文字詰めを行うカーニングとは変わって、トラッキングはまとまったテキストの間隔の調整をする際に使用します。

3、知っているだけでおしゃれになるフォントの使い分け方

読みやすいフォントの属性などを知ったら、仕上げに「知っているだけでおしゃれになるフォントの使い分け方」を確認しましょう。

ただ読みやすいだけではなく、リズムがあり、「おっ」と大切なポイントを印象付けながら、楽しみつつ要点を覚えて読み終えるのがやはり理想。

ここではその理想に近づけることが出来るセオリーをご紹介していきます。

(1)フォントそれぞれの特徴と選び方を知っておこう

まずフォントそれぞれの特徴と選び方について知っておきましょう。フォントについて知っておくと、どういうことをしてほしいと考えた時に、その目的にあったフォントを選びやすくなります。

①セリフ体・明朝体は読みやすく、サンセリフ体・ゴシック体は視認性が高い

セリフ体・明朝体は読みやすくて本文中におすすめだとこれまで紹介してきましたが、ゴシック体は基本的にどれも視認率が高いです。

太いフォントはそれだけ強調され、印象が強いので、元々太いゴシック体は視認率が高く、印象に残りやすい特性を持っています。

つまり、見出しなどに大きく太いゴシック体を使用すると本文と緩急をつけることが出来るようになります。

②癖のないフォントほど読みやすい

サンセリフ体、ゴシック体、共にさまざまなフォントが存在します。これらの中で癖の無いフォントが特に読みやすいフォントです。

癖のないフォントを使用することでフォントから変に与える印象がなくなり、読み手は文章に集中することが出来るようになります。

③装飾されているフォントはそれだけ印象も変わる

装飾されているフォントはそれだけで印象を与えます。ブランドの文字ロゴなども使用しているフォントを変えるだけでだいぶ印象が変わってしまいます。

(2)見出しと本文のフォントを変更する

文章の緩急をつけて、かつ印象に残るようにするセオリーの一つとして、見出しと本文のフォントを変更することが挙げられます。

見出しを印象に残りやすい太字のゴシック体に、本文を読みやすい明朝体(Webでは細いゴシック体)に変更してみましょう。

これだけでだいぶ印象が変わります。

ここに更に見出しと本文のフォントサイズに幅を持たせてみましょう。これは、フォントのジャンプ率と言います。

先程の画像と比べて本文も細いゴシック体を使用してみました。メリハリがつきましたね。初期と比べてみてもだいぶ印象が変わったと思います。

  • フォントのジャンプ率を調整する
  • 見出しを見やすい太字のゴシック体に変更する

このセオリーに準じるだけで、ここまで見やすく印象に残る文章に変わります。ぜひ実践してみてください。

(3)文字間隔を広げたり狭めたりするだけでおしゃれに?

読みやすさを追求した最後に、特定の場所を更に印象づけたりしたいときがあると思います。

例えば単語をそれだけでおしゃれに飾りたい場合は、全体的にフォントの間隔を広げるだけでサマになったりします。

使用しているフォントはOptimaとHelveticaです。

これらの文字の間隔を狭めたり、広げたりしてみました。左側は高級感が出るあのチョコレートブランド、右側は信頼ある家電メーカーのブランドです。文字詰めを行っていない上図では確かに違和感がありますが、文字の間隔を適切に設定した下図では大きく印象が変わりましたね。

良い書体を選んで、しっかりと文字詰めをするだけで、これだけ綺麗なブランドロゴになります。

ちなみにこれらのフォントは、遠くから見てもしっかりと読みやすさが維持されています。今度これらのロゴを見かけたら、遠くからでも視認することが出来るか是非チェックしてみてください。こういったことを知っておくと、日常的に使用されているフォントに対する見方が、ちょっとだけ変わります。町を歩くのが楽しくなりますよ。

もちろん、ただ広げたり狭めたりするだけではブランドロゴが持つ、信頼感や安定感、ブランドならではのアイデンティティーは表現されません。誰もが認めてくれるようなクオリティの高いフォントを使用して、そこから適切な文字間隔を調整したりバランスを保つことにより、信頼感や威厳、またそのブランドに合ったイメージを具体化したロゴデザインとなります。

4、可読性を重視した実用例

読みやすさについてのおすすめフォントや手法をご紹介してきましたが、最後に実用例としてはどのようなものがあるのかを開発背景も含めながらご紹介していきます。使用されるシーンや表示サイズによってさまざまな工夫がなされている事がご理解いただけると思います。

(1)アプリケーション

Monotype事例「SAP Fiori」のための新書体「72」

出典:http://www.monotype.com/jp/リソース/case-studies/レッド-ドット賞を受賞したアプリケーション-sap-fiori-のための新書体-72/

 

ヨーロッパ最大規模のソフトウェア会社SAP社の事例です。

2015年にビジネス向けアプリケーション製品であるSAP Fioriでレッド・ドット賞を受賞しました。この文字列中心のユーザーインターフェース環境に対応した新しい書体がMonotype社が開発した「72」というフォントです。書体製品単独での評価も高く、2017年にレッド・ドット賞を受賞しています。

この書体には可読性を高めるための細やかな配慮がなされており、特に数字の並びやディスプレイでのテキストの密集においての可読性の高さは特筆するものがあります。良いタイポグラフィシステムは、さまざまなサイズ、太さ、スタイルにおいてもバランスが良く、くっきりとした見やすいフォントセットを作りあげます。

Monotypeの事例を見る「SAP Fiori」のための新書体「72」

(2)公共サイン

Monotype事例 バーミンガム市のツアーガイドとして機能する「Network」書体

出典:http://www.monotype.com/jp/リソース/case-studies/バーミンガム市のツアーガイドとして機能する書体/

 

イギリス第二の都市であるバーミンガム市で利用されている公共サインの事例です。

バーミンガム市で利用されている公共サイン「Network」書体は、地元の人々や観光客等がより良い旅行体験をできるように、地図、看板、交通サービスを含む市のさまざまな要素を統一させ、どの要素からも視覚的に市を連想できようにデザインされています。

この書体には可読性を高めるための細やかな配慮と共に、メディアの種類、視認性、アクセシビリティ、およびライセンシングなどの要因に対処するためのさまざまな工夫が施されています。

Monotypeの事例を見る バーミンガム市のツアーガイドとして機能する「Network」書体

(3)マルチデバイス

Monotype事例 プレミアリーグ用に最適化されたカスタム書体「Premier Sans」

出典:http://www.monotype.com/jp/リソース/case-studies/プレミアリーグ-最適化されたカスタム書体で-確かなブランドアイデンティティを発揮する/

 

世界最高峰レベルのイングランドのサッカーリーグ、プレミアリーグでの事例です。

テレビやモバイルなどデバイス画面や選手の背番号、リーグの成績表に至るまでの膨大な数のアイテムを通して、各メディアが確実にユーザーへとそのブランド情報を認知できるように開発された書体「Premier Sans」。

この書体には可読性を高めるための細やかな配慮と共に、デジタル時代向けのさまざまなメディアへ対応するための工夫が施されています。

Monotypeの事例を見る プレミアリーグ用に最適化されたカスタム書体「Premier Sans」

まとめ

いかがでしたでしょうか。

フォントは属性などの使い道も大切ですが、「知っているだけでおしゃれになるフォントの使い分け方」でもご紹介したように洗練されたフォントを少しアレンジするだけで印象は大きく変わります。

フォントそれぞれの特性を詳しく知り、シンプルな使い分けを行って統一するだけで、メリハリのある、読みやすい文章が完成します。ぜひ、さまざまなシーンでの最適なアウトプットを実践してください。

関連記事