文字を読みやすく整える — サイズ・行間・色の決め方

ページの印象の大部分は文字で決まります。とはいえプロパティの種類は多く、最初は何から触ればいいのか分かりません。実際のところ、日常的に使うのは次の4つです。

行間が読みやすさをいちばん変える

意外に思われるかもしれませんが、読みやすさに効くのは文字サイズより行間です。日本語は漢字とかなが混ざるぶん、英語より行間を広めに取ったほうが読みやすくなります。本文なら 1.7〜1.9 あたりが目安です。

line-height には単位を付けない数値で書くのがおすすめです。1.8 と書けば「その要素の文字サイズの1.8倍」という意味になり、文字サイズを変えても比率が保たれます。

CODE行間を変えて読みやすさを比べるコードを書き換えると、すぐ下で動きます

line-height の数字を 1.2 や 2.2 に変えてみてください。同じ文章でも読む速さが変わるのが分かります。

画面が広いと、1行が長くなりすぎて目が戻れなくなります。max-width を文字数で指定しておくと、どんな画面幅でも読みやすさが保てます。em という単位を使うと「文字何個ぶん」で指定できるので、日本語なら 30〜40em あたりが目安です。

薄いグレーの文字はおしゃれに見えますが、読めなければ意味がありません。背景色との明るさの差（コントラスト比）が 4.5:1 以上あるかを基準にすると、多くの人が読める色になります。ブラウザの検証ツールで確認できます。

CODE読める色と、読みにくい色コードを書き換えると、すぐ下で動きます

2つ目の色を #767676 くらいまで濃くすると、読みやすさが変わります。薄いグレーの落とし穴を体感してみてください。

日本語のWebフォントは容量が大きく、読み込みが遅くなる原因になりがちです。学び始めのうちは、端末に入っている標準の書体に任せるのが確実です。次の1行を書いておけば、WindowsでもMacでもそれぞれの標準ゴシックが使われます。

無難な指定

body {
  font-family: system-ui, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

先頭から順に「あれば使う」という指定です。最後に sans-serif と書いておくと、どれも無かったときにゴシック体が使われます。