Webデザイン初心者必見！文字が読みやすくなる「フォントサイズ」と「行間」の基本

Taiga

Webデザインを学び始めると「フォントサイズって、どれくらいが適切なの？」という問題が出てくる。まずは、基準となるフォントサイズを紹介します。これさえ押さえておけば、全体のバランスが崩れてやり直し……なんて事態も避けられるはずです。

(本文で使用する)フォントサイズの基準

※ remについてはブラウザのデフォルトで1rem = 16pxになっている場合
※ 本文で使用するフォントサイズ。見出しなどはこの限りではない。

また、最小となるフォントサイズは明確に決まっているわけではないが、10px以下はほとんど読めない。したがって12px以上のサイズは確保したい。

その理由は目👀とデバイス💻の距離がハードによって変わるからである。遠くにあるものは小さくなり、近くにあるものは大きくみえる。スマホはPCよりも目👀から近い所でみる。PCの16pxとSPの14pxは体感的にそう変わらない大きさになるはずである。

次に行間についても紹介します。

日本語は文字の密度が高いため、英語よりも広めの行間を設定します。

本文サイズ（PC）：16px（1rem）
本文サイズ（スマホ）：14px（0.875rem）
行間（line-height）：日本語は1.7、英語は1.4
最小サイズの目安：12px以上

このルールを守れば視認性が高く読みやすいデザインを実現できると思います。もちろん、表現のためにこの数字よりも大きくなったり小さくなったりすることはありますが、最初はここから始めてみるのがおすすめです。

最後に: 本記事の見出しで使用している画像は、課題制作などに自由に使用していただいて構いません。

ご清聴いただきありがとうございました。

Taiga

Photograph & Engineering / 写真家 /

コンサルティング会社 → 新聞社でweb制作。写真とエンジニアのスキルを使用してプロジェクトに従事。