文字サイズについての考え方　印刷物やWebデザインで読みやすいフォントサイズは？

「文字サイズはいくつにするのが良いんだろう？」シンプルな疑問ながら、文字サイズの決定には多くの要素が絡み合ってくるため単純に決められたサイズにすれば良いとはなりません。

本記事では文字サイズをどのように選べばよいのか？目安となる文字サイズの参考値はいくつぐらいなのか？

Webサイト、バナー画像、印刷物…と媒体ごとの最適な文字サイズを決めるために知っておきたい文字サイズに関する知識を図解たっぷりで徹底解説します。

文字サイズについての考え方と見やすさに影響する要因

文字の見やすさはフォントサイズだけでは決まりません。

文字の読みやすさは複数の要素の組み合わせによって大きく変化します。

文字を大きくしたり太字にすれば見やすくなるという単純なものではありません。読みやすくするつもりで大きくしても、逆に読みにくくなってしまうこともあるので気をつけてください。

文字サイズを考える上で必要となる文字の見やすさに影響する要素についてわかりやすく解説します。

文字の間隔や余白によって読みやすさが大きく変化する

文字の読みやすさ、見やすさは「行間」「文字間」「余白」といった周囲のバランスによって大きく変化します。

上図のようにテキストを配置する周囲に「余白」がある場合とない場合では読みやすさが大きく異なります。

文字そのものの間隔とは別に、文字を配置する周囲の余白にも注意する必要があります。

文字が大きくても余白が無いと読みにくいので、文字サイズを大きくしたい場合でも一定以上の余白を取るようにしましょう。

文字と文字の間隔や、行の間隔も文字の読みやすさに大きく影響します。

以下のように文字間や行間が狭くなっていると文章を読むだけで疲れてしまいます。

文字間隔や行間は狭すぎても広すぎても読みにくくなります。

文字サイズが大きい場合は文字間のスペースを減らすことが推奨されていますが、小さな文字サイズを使用する場合は文字間隔を広くして個々の文字のコントラストを上げることで可読性が上がります。

また、多くの媒体では幅に限度があるため、文字サイズや間隔を大きくしすぎると改行までの距離が短くなり一度に読める文字数が減ってしまいます。

長文の場合は改行位置が近すぎても遠すぎても読みにくくなってしまうので注意が必要です。

文字間に関しては、全体の文字間隔を調整する「トラッキング」とは別に、字の形に応じて狭くしたり広くしたり個別に調整する「カーニング」と呼ばれる丁寧な調整もあります。

全部の文字を目立たせようとすると他も目立たなくなる

文字サイズを大きくして目立たせるのは強調の基本ですが、強調は周囲と差をつける「対比」によって効果を増します。差が際立つように強調箇所は厳選するのがおすすめです。

広告などでは「目立たせたい」「しっかり伝えたい」と思う箇所がたくさんあるため強調箇所を増やしすぎた結果、逆に一番目立たせたい部分の強調が弱まってしまうというケースもあります。

テキストにメリハリがないと読みにくくもなるので情報整理を行い、優先順位をつけ一番目立たせたい箇所が目立つように文字サイズを調整してみてください。

文字装飾する場合は文字サイズを大きめにする

「ドロップシャドウ」「ふちどり」「光彩」「切り抜き」「3D」など文字加工によって文字を目立たせることができますが、文字加工を行う場合は通常よりも文字サイズを大きく設定する必要があります。

シンプルな「太字」や「赤字」「アンダーライン」などの強調は文字サイズが小さくても問題ありませんが、上図のように強い装飾を使うと文字の可読性が下がるので文字サイズを大きくして読みやすさを補強する必要があります。

装飾文字は文字数が少ないタイトルなどには向いていますが文章に装飾文字を使用すると可読性が極端に落ちるので注意が必要です。

装飾が強いものはタイトルや見出しなど、ピンポイントで強調したい場所だけに使用するのがおすすめです。

文字装飾の方法は以下の記事で解説しています。

文字の色と背景色の配色によって見やすさが異なる

配色に高いコントラストがあると、文字が目立ちやすくなり小さな文字でも見やすくなります。

明度と色相が近い色の組み合わせはコントラストが弱く、文字の可読性が著しく低下するため小さい文字サイズでは読むのが困難になってしまいます。

明度に差をつければどのような組み合わせであっても一定以上のコントラストが出るので読みやすさが向上します。

色相に差を付ける場合は色相環の反対に位置する補色を使用するとコントラストが強くなります。

色相環の反対に位置する補色関係はコントラストが強くなりますが、「彩度」と「明度」の高い色同士の組み合わせは目に刺激があり、目に負担がかかる色の組み合わせになってしまい読みにくくなるので少し彩度を落として使用するのがおすすめです。

色に関しては単純にコントラストが高ければ見やすいというわけではないので色の組み合わせには注意が必要です。

配色については配色デザインのコツにて詳しく解説しています。

可読性・判別性が低いフォントは読みにくい

可読性・判別性が高い、本文に適したフォントは「ゴシック体」「明朝体」です。

Web上では「ゴシック体」を使用することが多くなっていますが、小説をはじめとした書籍では「明朝体」のほうがよみやすくなっています。

装飾書体などデザイン性の高いフォントは可読性が低いため、長文には適していません。デザインフォントはタイトル程度であれば支障はありませんが、本文に使用するのは控えたほうが良いでしょう。

読みやすいフォントとはどのようなものなのかについては以下の記事で詳しく解説しています。

年齢ごとの適した文字サイズ

文字サイズ選択は幼児から高齢者まで、ターゲットとなる読者の読み取り能力や文字の認識能力を考慮して選択する必要があります。

若年層は小さな文字や文字数が多い版面でも支障なく読むことができますが、未発達の子供や視力や認識能力が低下してくる高齢者へは、大きな文字サイズやコントラストのはっきりした判別しやすいフォントを選びましょう。

年齢層	印刷物	ディスプレイ	備考
子供 (5-10歳)	14pt	20px	幼児向けは読みやすさより見やすさを重視
若者・成人 (10-40歳)	10pt	16px	最低限の見やすさがあればデザイン性を重視しても可
中年 (40-60歳)	12pt	18px	近視が増えてくるため少し大きめの文字サイズに
高齢者 (60歳以上)	14pt	20px	可読性、判別性を重視し文字を大きくする

自分が若年層の場合は、子供や高齢者向けのサイズを決める際は自分が見やすいサイズの1.3倍程度を目安とするとわかりやすいかもしれませんね。

文字サイズはブラウザやOS設定で変更されていることもある

WebサイトやアプリケーションではユーザーがブラウザやOS側の設定で文字サイズを変更することができます。

ブラウザの設定では文字を200%まで拡大を行うことができますが、デザイナー側はユーザーの200%拡大を想定していないことも多く、拡大時にテキストの一部が表示されなくなったり、機能が使えなくなることが多々あります。

設定による文字サイズ拡大は視覚障害などで文字が読めない人などがよく使用する機能なので拡大表示時の挙動もしっかりと確認しておきましょう。

UIデザインについては以下の記事で詳しく解説しています。

ホームページやECサイトなどWebデザインにおける文字サイズ

ホームページ(Webサイト)やアプリケーションではユーザーの閲覧しているデバイスサイズに応じて文字サイズやレイアウトを自動的に調整する「レスポンシブデザイン」を使用するのが基本です。

ブラウザ上でのテキストサイズは下表の通りです。

ブラウザの設定で文字サイズ倍率を変更している場合は文字サイズが異なります。100%表示にしている場合に実寸となります。

Webサイトで使用する本文サイズは16px、最小値は12pxを基準とするのが良いでしょう。

どちらも使用状況に応じて多少上下しますが大きくは変わりません。

Webサイトの本文のフォントサイズは16~18px

本文の文字サイズは16pxが基準とされています。

16pxは以下の主要ブラウザの標準サイズになっており、サイト側で文字のサイズ設定がされていない場合は16pxで表示されます。

デフォルト値である16pxを基準に考え、高齢者向けであれば少し大きい18px〜20px程度にしたりと臨機応変に変更してください。

最小フォントサイズは12px程度

Webサイトやバナーで使用する際の最小サイズは12px程度が基本です。

300ppi以上の高解像度ディスプレイを使用している場合は細部まで綺麗に表示されるため10pxの文字サイズでも読むことができますが、72ppi程度の低解像度ディスプレイの場合は10pxでは潰れてしまい読みにくくなります。
（解像度やppiについては解像度の解説記事をご覧ください）

また、明確な基準は公開されてはいないものの10〜12px程度の文字サイズが小さいテキストを使用しているとGoogle Search Consoleモバイルユーザビリティのエラーが表示されやすくなります。

「テキストが小さすぎて読めません」などのエラーが出る場合は最小サイズを13px以上に変更することで改善されることが多いです。

Googleの推奨フォントサイズは16px（行間は1.2em）

ユーザビリティに問題があると判断されるとSEOでマイナス評価になりますし、なによりユーザーが見にくくて不便です。小さい文字はユーザビリティの低下に繋がるため12px未満の使用は極力控えることをおすすめします。

他にも「行間」や「クリック可能範囲」「カラーコントラスト」といった要素もユーザビリティに影響してきます。

ユーザーが使いやすいデザインについては以下のUIデザインについての記事も参考にしてみてください。

最大サイズは無制限だが大きすぎると読みにくい

文字サイズの上限はデザインのレイアウトによって自由にバランスを取れば良いだけなのでそこまで気にしなくて良いのですが、極端に大きくしてしまうと逆に読みにくくなってしまいます。

文字数が少ない場合は問題ありませんが、この行のように「文章」に対して大きな文字サイズを使用するとスマホなどでは改行数が増えて読みにくくなります。(40px)

ユーザーがブラウザでの拡大表示（200%）を使用している場合はさらに文字が大きくなるので、可読性が下がります。

テキストのサイズは完全に固定することができないため強調用に大きな文字サイズを使用する場合は自動改行などに注意して使用しましょう。

バナー画像やLP画像の文字サイズについて

Webサイトやバナーに使用する「画像」はデザインソフトで設定した文字サイズと、ユーザーが閲覧するときの文字サイズは大きく異なる可能性があります。

Webサイトは配置する画像のサイズをCSSで記述しますが、バナーやアイキャッチ画像などはPhotoshopやIllustratorなどのデザインソフトで作成したときの文字サイズではなく、CSSの設定に応じて縮小表示されたサイズまたは閲覧端末の最大幅に合わせて自動縮小表示されたサイズになるので注意が必要です。

画像内に文字入れる場合は縮小されることを考慮して、画像内での文字サイズではなく実際に表示される文字サイズを基準にサイズを決める必要があります。

画像内の文字のサイズは閲覧環境によって変化する

上図は「750px幅の画像が100%表示された際に実寸になるように作成した画像」です。

パソコンやタブレットでは750pxで100%表示され、意図した通りのサイズで表示されますがスマートフォンで見た場合は最大幅に合わせて縮小されるため実際のサイズよりも小さく表示されているはずです。

スマートフォンの場合は以下の300px幅の画像であれば100%原寸表示が可能になり、実寸表示になります。

また、最近では高解像度ディスプレイを搭載したパソコンやスマホが増えてきているため、Retina対応として実際の表示サイズよりも大きい画像を縮小して使用することも多いです。

以下の2つのバナー画像はWebブラウザ上での表示サイズは同じですが、データ上の文字サイズは異なります。
（画像内に記載した文字サイズは画像データ上の文字サイズ）

表示するバナーサイズが300pxだとしても600pxの画像を縮小表示することで高解像度ディスプレイでも綺麗に表示することができます。

実際に上図をiPhoneやMacBook ProなどのRetinaディスプレイをはじめとした高解像度のディスプレイで見ると、1枚目の50%縮小表示の方がぼやけずに綺麗に見えているはずです。

このように縮小することで綺麗に表示できるのですが、文字サイズも縮小されてしまうためデザインソフトで制作した文字サイズと実際の表示サイズが異なる点に注意しましょう。

解像度についてもっと詳しく知りたい方は解像度の解説記事をご覧ください。

レスポンシブデザインでは画像を複数枚用意する

文字を含んだ幅広画像をスマートフォンでも文字を見やすくするためには「PC用の画像」と「スマホ用の画像」の2枚を用意します（必要に応じてタブレット用などさらに枚数を増やすこともあります）

上図のようにパソコンなど大きなディスプレイで見ることを前提とした幅の広い画像は、スマートフォンや小型のタブレットで見た際は縮小表示され、大きめの文字でも読めないくらいに小さくなってしまうことがあります。

そこで、以下のように閲覧デバイスに応じて表示する画像を自動で切り替えることで小さなディスプレイでも文字を縮小せずに済みます。

画像内の文字は縮小表示されることが多いので実際に表示されるさまざまなサイズを想定して文字サイズを決定しましょう。

今回の例でいうと以下の2つの画像を用意することになります。

このように小さなディスプレイ用の画像を用意しておけばスマホで見た際にも画像が縮小されて見にくくなることがありません。

PC用の画像しか用意していない場合と、スマートフォン(SP)用の画像を用意した場合の違いは下図の通りです。

PC画像をそのまま表示するとパソコンの表示をそのまま縮小したように多くの情報が画面上に表示されますが、文字サイズも小さくなるため拡大しないと文字が読めません。

画像内文字を使用する場合はスマホでもスムーズに読めるようにSP用画像を用意し、適切なサイズで文字表示できるようにします。

バナー画像やアイキャッチ画像の読みやすい文字サイズは20~30px

バナー画像やアイキャッチ画像などのサムネイルがメインとなる画像は20~30px程度の文字サイズが読みやすい本文サイズとなっています。

バナーなどの広告画像は能動的に読む文章とは違うので読みにくければ全く読まれません。拡大してまで読もうとすることはないのでスクロール中に目に入っただけでもスラスラ読めるぐらいの文字数と、Webサイトより少し大き目の文字サイズがおすすめです。

もちろん冒頭で解説したように余白や色など文字サイズ以外の要素によっても読みやすい文字サイズは変化するので、臨機応変に調整してください。

タイトルやメインコピーはデザインに合わせて本文の倍以上の文字サイズを使用すると良いでしょう。

バナーなどの画像の文字サイズ最小値は12px程度

Webサイト同様に最小値は12px程度とされています。最小サイズはあくまでも注意書きなどあまり目立たせる必要がない箇所に利用するサイズなので読んで欲しい文章の場合はもっと大きくして使用してください。

前述したように解像度の高い画像を縮小している場合と、原寸表示している場合でも見やすさは異なります。

先程の画像と文字の表示サイズは同じですが、縮小表示しているため解像度が異なります。

低解像度の100%表示では12pxの文字サイズでも文字のふちがボケて読みにくくなっていますが、50%縮小表示した高解像度のバナーは「高解像度ディスプレイで見た場合に限り」10pxの文字がはっきりと見える範囲になっています。

しかし、ディスプレイの解像度は閲覧者の環境によって異なるため高解像度を基準とせず、低解像度での表示を基準にして12px未満のサイズを使用するのは避けたほうが良いでしょう。

JPG画像は圧縮時に文字が荒れるので小さい文字が読みにくくなる

ファイルサイズ軽減のためにJPG画像を高圧縮していると小さい文字は荒れ、文字の周囲にはノイズが混じって読みにくくなるため注意が必要です。

JPG画像は保存の際にピクセル情報を削除し容量の削減を行っています。

低品質な書き出しと高品質な書き出しでは同じ解像度（下図の例はどちらも同じ300×300px）ですが見た目の綺麗さは大きく異なります。

ファイルサイズが小さくなるメリットはありますが文字が荒くなり、小さい文字は読みにくくなってしまうため高圧縮を行う場合は文字サイズの基準値を引き上げる必要があります。

なぜJPG画像はモヤがかかったようにボケるの？

JPEGは画像を8×8ピクセルのブロックに分割して圧縮するため、高圧縮になればなるほど各ブロック内の情報が失われブロック間の境界部分が目立つようになります。これが圧縮アーティファクトと呼ばれるもやがかったような現象を引き起こす要因となります。

圧縮率を下げることで圧縮アーティファクトを軽減することができます。

ちなみにファイルの書き出しはJPGよりもPNGのほうが軽量かつ綺麗になることが多いため、書き出し画像内容によってファイル形式を使い分けるのがおすすめです。

上図のようにグラデーションや写真を使っていない画像の場合はPNGのほうが綺麗で容量も小さくなり、ブロックノイズを防ぐことができます。

画像のファイル形式の違いや使い分けについてもっと詳しく知りたい方は以下の記事をご覧ください。

印刷物における文字サイズの見え方の変化と最小文字サイズ

印刷物においては以下の点に注意して文字サイズを選定する必要があります。

印刷物の文字サイズについて詳しく解説します。

掲示物は閲覧距離や場所によって文字サイズを考える

電車の吊り革広告や街頭ポスターなどの掲示物は少し離れた距離から見ることになるため、書籍やチラシなどの手元で見る印刷物と比較すると倍以上の文字サイズが必要となることが多いです。

冒頭で解説した文字の見やすさに関わる要素とは別に「距離」や「環境」が大きく関わってくるため明確な基準となる文字サイズはありません。

参考までに目安となる参考値を紹介しますが、見やすい文字サイズは距離だけでなく、環境光や周囲の色、見るシチュエーションなどによって大きく変化するため、実際の掲示場所とデザインを基準に判断してください。

掲示場所（用紙サイズ）	メインテキスト	サブテキスト
歩道や店内（A3）	100~300pt	40~100pt
広場や大型店舗（A1）	300〜600pt	100〜200pt
道路や線路脇（B0）	600〜900pt	300〜600pt

陽の光で見る状態と、街灯の光で見る状態でも文字の見やすさは異なります。

また車や電車に乗りながら見ることになる街頭看板や案内板などは移動しながら短時間で見ることになるため、さらに大きな文字サイズが求められます。

印刷物では文字サイズの単位はPではなくQやHを使用することも多い

フォントサイズの単位には「Pt（ポイント）」とは別に「Q (級)」や「H (歯)」があります。

ptはインチを基準としたサイズなので、日本の印刷現場ではメートル基準で表すことができるQやHが多く使用されています。

どの単位を使用しても問題ありませんが文字サイズをQで表すことも多いという点だけ覚えておきましょう。

単位	定義	mm換算
pt (ポイント)	1/72 inch	約0.3528mm
Q (級)	1/4 mm	0.25mm
H (歯)	1/4 mm	0.25mm

「Q」は級で、1Qは1mmの1/4、つまり0.25mmを示し、主に文字サイズの指定に使用されます。
「H」も1Hが1/4の0.25mmで、行や字送りの単位として使用されます。

1Q＝1/4mmとなっているため、4Qで1mm、6Qで1.5mmとすぐに計算できる利便性の高い単位になっています。

ちなみに「級上げ」と言われたら文字のサイズを1Q上げるということを意味します。

印刷物で読みやすい本文サイズは8〜10pt前後

手に持って見る印刷物のサイズ参考値

用途	pt	Q
見出し	11〜20pt	15〜30Q
本文	8〜10pt	11〜14Q
注釈	6.5〜8pt	9〜11Q
最小値	6pt	8.5Q

あくまでも参考値です。さまざまな条件で見やすいサイズは変化します。

印刷物を手に持って読む場合、読みやすい本文サイズは8〜10pt（11〜14Q）程度が多くなっています。

対象者が高齢者や小さな子どもの場合はそれに合わせて文字サイズを大きくしたり調整してください。

ちなみに私が出版した書籍のサイズは以下のサイズで作成しています。

四六判はB6版に近いサイズで単行本くらいのサイズになるため、文字サイズも少し小さめにしています。

これ以上小さくするとかなり読みにくくなるかなと感じました。

印刷の最小サイズは5〜6pt（7〜8.5Q）

印刷所の推奨最小サイズは6pt（Q数では8.5Q）と少し大きめに指定されることも多くなっていますが、多くの場合は5pt（7Q）程度まで下げても印刷に支障はありません。

一般的なオフセット印刷であれば1.5pt程度の小さい文字サイズでも印刷できますが、印刷所のガイドライン上では非推奨となっていることも多く、綺麗に印刷できたところで虫眼鏡で見るレベルの小ささになってしまうので読む文字として使うのはおすすめしません。

読みにくくても印刷所の推奨範囲から外れても良いからギリギリまで小さくしたいという場合は3.5pt（5Q）あたりまで下げることもできますが、後述する印刷方式、使用する用紙やインクによっては滲んでしまい完全に読めなくなる場合もあるので注意してください。

ちなみに線の太さは0.3pt（0.1mm）以上が推奨されています。こちらもさらに小さいサイズでも印刷は可能ですがかすれてしまう可能性が出てきます。

印刷方式や使用する用紙によっても異なる

印刷方式によって印刷の細かさや綺麗さが異なるため、文字の最小値は微妙に変化します。

印刷方法は多くの種類がありますが、有名なものでは以下のようなものがあります。

用紙もさまざまな種類があり、一例を上げると以下のようなものがあります。

印刷方式と用紙の組み合わせ、また個々の印刷機の仕様によっても綺麗に表示できる最小文字サイズは異なります。

印刷所の指定する最小サイズ以下にするのは控えたほうが良いでしょう。

文字サイズを選ぶ際のポイント まとめ

文字の読みやすさや目立ちやすさは文字サイズ以外にも「余白や間隔」「配色」「書体」など他にも多くの要素によって影響されます。

様々な要素の組み合わせから総合的に判断して文字サイズを決定しましょう。

媒体ごとの文字サイズ参考値

用途	ディスプレイ	印刷物
見出し	18〜22px	11〜20pt
本文	16〜18px	8〜10pt
注釈	13〜14px	6.5〜8pt
最小値	10〜12px	5〜6pt

ディスプレイはバナー広告の場合は瞬時に読ませるために短文＆文字サイズ大きめにしたり、ポスターや看板などの場合は掲示場所によって適切な文字サイズは大きく変化します。

Webサイトでの文字サイズの選び方のポイント

Webサイトでの文字サイズ選定においておさえておきたいポイントは以下の3つ

Webサイトではユーザビリティを考慮して文字サイズを設定しましょう。

バナー画像やLP画像を使用する場合のポイント

画像内に文字を含める場合、文字サイズ選定でおさえておきたいポイントは以下の5つ

バナー画像やLP画像を使用する場合はデバイスごとの縮小表示に注意してください。

印刷物の文字サイズ選定のポイント

印刷物の文字サイズを選ぶ際は以下の点をしっかり抑えておきましょう。

印刷物は内容によって文字サイズが大きく変化するため、参考値はあまり気にせず実際に印刷し適切な大きさを探すのが基本です。

実際の印刷物のサイズを測ってみて参考にするのもおすすめです。

文字の見やすさ・読みやすさに関わる要素

文字の見やすさ・読みやすさに影響する要素はたくさんありますが、その中でも特に重要となる要素について解説した記事をピックアップしました。

文字を見やすくしたい場合はぜひ参考にしてみてください。