見やすいフォントの選び方とは?目的と用途から書体を決める5つの手順

フォントの選び方の基本

まずは「フォントの選び方」が何を指すのか、そして感覚だけで選ぶと何が起きるのかを確認しましょう。

フォントの選び方とは何か

フォントの選び方とは、デザインの目的・使う場所・伝えたい印象に合わせて、使うフォントを根拠を持って決めるための判断の手順のことです。

フォントとは、パソコンやスマートフォンで文字を表示するためのデータのことで、「明朝体」「ゴシック体」といった書体のデザインをデータにしたものです(詳しくはフォントと書体の違いで解説しています)。

「なんとなく好きだから」ではなく、「本文だから読みやすさを優先する」「信頼感を出したいからこの書体にする」と理由を言えることが、フォント選びのゴールです。

理由を持って選べると、デザインの説得力が上がるだけでなく、迷う時間も短くなります。

「なんとなく」で選ぶと起きること

感覚だけでフォントを選ぶと、見た目の印象は良くても、肝心の文章が読みにくくなることがよくあります。

とくに多いのが、見出しで使うような目立つフォントを、そのまま本文にまで使ってしまうケースです。

※書体や太さの表示は、お使いの端末に入っているフォントによって変わります。

左のように本文まで極太の書体にすると、画数の多い漢字がつぶれ、どこを読めばよいか分かりにくくなります。

右のように標準的な太さの書体にすると、同じ文章でも負担なく読み進められます。

目立つことと読みやすいことは別物なので、使う場所ごとに求められる条件を分けて考える必要があります。

見やすいフォントを選ぶ5つの手順

ここからは、実務でフォントを決めるときの流れを5つの手順に分けて紹介します。

上から順番に考えると、候補を自然に絞り込めます。

手順1:使う場所(役割)を決める

最初に決めるのは、そのフォントを「どこで」使うかです。

同じデザインの中でも、本文・見出し・ボタン・ロゴでは、フォントに求められる条件がまったく違うからです。

使う場所	いちばん大事にすること	選び方の目安
本文(長い文章)	読みやすさ・目が疲れないこと	標準的なゴシック体や明朝体の、普通の太さ
見出し	目に留まること・内容の区切りが分かること	本文と同じ書体の太字、または印象に合う別の書体
ボタン・メニューなどのUI	小さくても一瞬で判別できること	はっきりしたゴシック体(サンセリフ体)
ロゴ・キャッチコピー	印象・個性	伝えたい印象に合わせて、個性のある書体も候補にする

表の「UI(ユーアイ、ユーザーインターフェース)」とは、ざっくりいえば、ボタンやメニューのように利用者が操作するための部分のことです。
「購入する」「お問い合わせ」のようにタップやクリックをする文字は、流し読みでも一瞬で意味が伝わるよう、飾りのないくっきりしたゴシック体が向いています。

本文には読みやすさ、ロゴには個性、というように、役割ごとに優先順位をはっきりさせることがスタートです。

手順2:伝えたい印象を言葉にする

次に、デザイン全体で伝えたい印象を「誠実」「やさしい」「高級感」などの2〜3個の言葉にします。

書体にはそれぞれ印象の傾向があり、たとえば明朝体は上品で落ち着いた印象、ゴシック体ははっきりとした現代的な印象、丸ゴシック体はやさしく親しみやすい印象を与えやすいとされています(書体ごとの印象は書体による印象の違いで、見本と一緒に解説しています)。

言葉を先に決めておくと、手順1で決めた役割のうち、とくに見出しやロゴの書体を選ぶときの判断基準になります。

手順3:本文は「見やすさ」を最優先で選ぶ

本文のフォントは、印象よりも見やすさ・読みやすさを最優先で選びます。

本文は文字数が多く、読みにくいフォントだと内容が伝わる前に読者が離れてしまうからです。

見やすいフォントかどうかは、次のポイントで確認できます。

確認するポイント	見やすいフォントの特徴
形のクセ	装飾や崩しが少なく、標準的な形をしている
文字の判別	「ソ」と「ン」、「1」と「l」(小文字のエル)など、似た文字を見分けやすい
小さいサイズ	スマートフォンの本文くらいの小さな文字でもつぶれない
太さの種類	普通・太字など複数の太さがそろっていて、強調に使える

迷ったら、まずはOSに標準で入っているゴシック体(Windowsの游ゴシック、Macのヒラギノ角ゴシックなど)や、無料で使えるNoto Sans JPのような定番の書体から試すのがおすすめです。

定番の書体は多くの人が見慣れているぶん、クセがなく読みやすいからです。

Noto Sans JP(ノート サンズ ジェイピー)は、GoogleがGoogle Fontsで無料配信している日本語のゴシック体です。
商用利用もできるライセンス(SIL Open Font License)で公開されていて、細いものから太いものまで太さもそろっているため、Webサイトの本文によく使われています。

似た文字の見分けやすさなど、「読める・見分けられる」の考え方は視認性・可読性・判読性の違いで解説しています。

手順4:和文と欧文の組み合わせを決める

日本語のデザインでも、英単語や数字が入る場合は、和文フォント(日本語用)と欧文フォント(アルファベット用)の組み合わせを考えます。

和文フォントにもアルファベットや数字は入っていますが、欧文フォントのほうが英数字の形や間隔が整っていることが多いため、英数字だけ欧文フォントにすると見栄えが良くなる場合があります。

和文フォントに入っている英数字は、日本語と並べたときのなじみやすさを優先して作られていることが多く、英数字だけで見ると、形や字間のバランスが欧文専用のフォントほど整っていない場合があるためです。
一方、欧文フォントはアルファベットや数字をきれいに並べることだけを考えて作られているので、価格や「SALE」のような英数字だけを差し替えると、引き締まった印象になりやすくなります(和文と欧文の組み合わせ方はフォントと書体の違いでも紹介しています)。

※違いの出方は、お使いの端末に入っているフォントによって変わります。

左は英数字も和文フォントのまま、右は「Basic」と「1,980」だけ欧文フォントで表示しています。

右のほうが英数字の形が引き締まり、価格などの数字が読み取りやすくなる場合があります。

IllustratorやFigmaなどのデザインツールなら、英数字の部分だけを選んで欧文フォントに変えれば同じ見た目にできます。
ここからはWebサイトを作る人向けの話なので、コードを書かない人は「Webでも設定でできる」とだけ知っておけば十分です。

Webサイトでは、CSSのfont-family(フォントを指定するプロパティ)で、欧文フォントを先、和文フォントを後に書くと、英数字だけを欧文フォントで表示できます。

font-familyは、ブラウザー(Google Chromeなど)に「このフォントを第1希望、なければ次」と伝える、フォントの優先順位の指示書のようなものです。

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}

これは、ブラウザーがフォントを1文字ずつ選び、先に書いたフォントに含まれない文字(日本語)だけを次のフォントで表示する仕組みになっているためです(MDN:font-family)。

最後のsans-serifは「指定したフォントがどれもなければ、端末にあるゴシック体系で表示する」という意味の予備の指定で、必ず最後に書いておきます。

手順5:表示環境と利用条件を確認する

最後に、選んだフォントが実際の環境で表示できるか、使ってよい条件かを確認します。

WindowsとMacでは標準で入っているフォントが違うため、自分のパソコンで見えていたフォントが、閲覧者の環境では別のフォントに置き換わることがあるからです。

Webサイトの文字は、何も工夫しなければ、見る人の端末(iPhone・Mac・Windowsなど)にあらかじめ入っている「OS標準フォント」で表示されます。
入っているフォントは端末ごとに違うので、作った人と見る人で、同じページでも違うフォントに見えることがあるのです。

標準で入っているフォントは、MicrosoftのWindows 11のフォント一覧や、AppleのmacOSに含まれるフォントで確認できます。

どの環境でも同じフォントで表示したい場合は、Webフォントを使う方法があります。
Webフォントは、ページを開いたときにインターネット上のサーバーからフォントのデータを読み込んで表示する仕組みで、端末に入っているフォントに関係なく、ほぼ同じ見た目で表示できます。
ただし、読み込むデータの分だけ表示に時間がかかることもあります。

また、フォントには使ってよい範囲を決めた「ライセンス(利用規約)」があり、無料のフォントでも商用利用やWebでの使用に条件がある場合があります。

使う前に、必ず各フォントの配布元で利用規約を確認しましょう。

実践のポイント

手順どおりに選んだあとで、仕上がりの統一感を保つためのコツと、よくある疑問をまとめます。

フォントの種類は3つまでに絞る

1つのデザインで使うフォントの種類は、多くても3種類程度に絞るのが基本です。

フォントが増えるほど印象がばらばらになり、どこが大事なのかも伝わりにくくなるからです。

たとえば「本文用のゴシック体」「見出し用の明朝体」「英数字用の欧文フォント」の3つで十分に表情は作れます。

同じフォントの太さやサイズを変えるだけでもメリハリは出せます。
たとえば本文を標準の太さの16px、見出しを太字の24px(本文の1.5倍)にするだけで、フォントが1種類でも読みやすく強弱のあるデザインになります。
変化をつけたくなったら、新しいフォントを足す前に、まず太さとサイズで差をつけられないか考えてみましょう(太さの使い分けはウェイトによるメリハリで解説しています)。

注意点・よくある間違い

• 目立たせたい気持ちが先に立ち、見出し向けの個性的なフォントを本文にまで使ってしまうことがあります。
  本文は見やすさを最優先にし、個性的なフォントは見出しやロゴなど短い文字に留めましょう。
• 気に入ったフォントを次々に追加し、気づけば4種類、5種類と増えていることがあります。
  使っているフォントを書き出して数え、3種類を超えていたら役割の重なっているものを減らしましょう。
• 自分のパソコンだけで確認して、別のOSやスマートフォンでは違うフォントで表示されていることに気づかないことがあります。
  公開前に、WindowsとMac、スマートフォンでも表示を確認しましょう。
• 無料で配布されているフォントを、利用規約を読まずに商用のデザインに使ってしまうことがあります。
  商用利用やWebでの使用が許可されているか、必ず配布元で確認しましょう。

よくある質問

• Q. 結局、見やすいフォントはどれですか?
  A. 本文なら、装飾の少ない標準的なゴシック体がもっとも無難です。
  Webなら、OS標準の游ゴシックやヒラギノ角ゴシック、無料で使えるNoto Sans JPなどがよく使われています。
  読み間違いを減らしたい場面では、読みやすさに配慮して作られた「UDフォント(ユニバーサルデザインフォント)」も候補になります。
• Q. 本文を明朝体にしてもいいですか?
  A. 問題ありませんが、明朝体は横線が細いため、画面で小さく表示すると線がかすれて見えることがあります。
  本文を明朝体にする場合は、文字サイズをやや大きめにし、スマートフォンでも読みやすいか確認しましょう。
• Q. フォント選びに迷ったら、まず何を参考にすればいい?
  A. 自分が作りたいものに近いWebサイトやバナーを集め、どの役割にどんなフォントが使われているかを観察するのが近道です(観察のしかたはタイポグラフィの観察方法で紹介しています)。
  そのうえで、この記事の5つの手順に当てはめて候補を絞り込んでみましょう。

まとめ

フォントの選び方とは、目的・使う場所・伝えたい印象に合わせて、根拠を持ってフォントを決めるための手順のことです。

「使う場所を決める」「印象を言葉にする」「本文は見やすさ最優先」「和文と欧文を組み合わせる」「表示環境と利用条件を確認する」の5つの手順で考え、使う種類は3つ程度に絞ると、迷わず統一感のあるデザインになります。

まずは今作っているデザインで使っているフォントを役割ごとに書き出し、本文のフォントが見やすさを最優先で選べているかを確認してみてください。