読みやすい文字サイズ・行間・字間
読みやすさは「感覚」ではなく「数値」で決まる
タイポグラフィ(文字の設計)は感覚ではなく数値で管理できます。
適切なサイズ・行間・字間を知っておくことで、
「なんか読みにくい」という問題を数値を見直すだけで解決できます。
文字サイズの目安
デジタル(px)の場合、本文は14〜16px、
見出しは用途に応じて16〜48px以上が一般的です。
本文を12px以下にすることは絶対に避けましょう。
それ以下になると多くのユーザーには読めません。
印刷物(pt)では本文9〜12pt、見出し16〜36pt以上が目安です。
印刷後に実物を確認することで、画面上では問題なくても読みにくいサイズになっていないかをチェックできます。
CanvaでInstagramの内容ページを作成する場合、
見出しは50pt前後、本文は30pt前後にすると読みやすいデザインになります。
使用ツールやデザインを載せる媒体によって適切なサイズが変わるため、
確認をしながら文字サイズを決めていきましょう。
行間(ラインハイト)
行間が狭すぎると圧迫感があり、広すぎると視線の流れが切れます。
推奨は文字サイズ × 1.5〜1.75です。16pxのテキストなら24〜28px、
14pxなら21〜24pxが目安になります。
なぜ×1.5〜1.75が「ちょうど良い」のか。
人の目は一行を読み終えると、行末から次の行頭へ素早く移動します(サッカード眼球運動)。
この移動のとき、目が「どの行に戻るべきか」を判断する手がかりが行間の空白です。
行間が狭いと次の行と隣の行の区別がつかず読み誤りが起きやすく(ライン・トラッピング)、
広すぎると行と行のつながりが感じられなくなります。
×1.5〜1.75は、この移動を確実に正しい行へ誘導できる最適ゾーンとして、
タイポグラフィの研究から導き出されています。
Canvaでは「行の高さ」スライダーを1.5〜1.7に設定すると読みやすくなります。
Figmaでは「Line Height」の数値で直接指定できます。
字間(レタースペーシング)
字間は用途によって使い分けます。見出しサイズの文字は0.05〜0.1em(Canvaなら+1〜+3)ほど広げると高級感と読みやすさが増します。
本文はデフォルトの0emのままが読みやすく、
広げすぎると逆に読みにくくなります。
全大文字の英文はデフォルトでは読みにくいため、
必ず0.1〜0.15em程度字間を広げましょう。
読みにくい本文の3大チェック項目
「なんか読みにくい」と感じたら、まず3つの数値を確認してください。
文字サイズが14px未満になっていないか。行間が1.0(詰まりすぎ)になっていないか。
1行に80文字以上の長い行になっていないか。
この3つを満たしていれば、基本的な読みやすさは確保されています。
まとめ
読みやすいテキストは感覚ではなく、正しい数値の設定から生まれます。
本文サイズ・行間・字間の3つを意識することで、
誰が見ても読みやすいデザインが作れます。
Canvaで100字程度の本文テキストを入力し、行間隔を変えた3パターンで比較してください。
NEXT STEP
次は「やってはいけないフォントの使い方」続けて読む →