ポイント
- 文字の大きさは 18 px 以上
- サイズの指定に 1rem を入れる
目的：webサイトを見やすくする
webサイトの印象は、フォントで大きく変わってくる。
今回は、見やすいフォントを検討した。
デフォルトは 16 px
文字の大きさは、スマホ や PC を含めて、全ての端末でデフォルトが 16 px に設定されている。
それぞれの端末のシステムフォントでの表示を確認してみる。
iOS
Android
windows
18 px 以上が見やすい
iOS や Android のスマホは、小さな画面だと 18 px 以上が見やすい。
windows も注意が必要で、デフォルトのシステムフォントの游ゴシックは文字が細くデザインされているので、小さなフォントだと文字がかすれて見える。
フォントは少し大きめの指定が良いと思う。
1rem を入れる
ユーザーによっては、デフォルトのフォントの大きさを変更している場合がある。
| サイズ | ユーザーの割合 |
|---|---|
| 16px | 96.92% |
| 20px | 0.50% |
| 19.2px | 0.42% |
| 25.6px | 0.23% |
| 17px | 0.18% |
| 24px | 0.15% |
| 20.8px | 0.15% |
| 14.4px | 0.10% |
| 18px | 0.10% |
| 18.4px | 0.08% |
| 18.56px | 0.07% |
| 14px | 0.07% |
出典：Pixels vs. Ems: Users DO Change Font Size
およそ 3% のユーザーが、デフォルトのフォントの大きさを 16 px から変更していて、文字を見やすくするために 少し大きめに指定しているケースが多い。
webサイトのフォントを 14 px のように絶対値で指定すると、このユーザー設定を上書きしてしまう。
サイズを指定するときは 1rem（ユーザー指定のフォントサイズ） を入れるのが好ましい。
タブレットや PC では、少し大きく表示する
タブレットや PC の場合、もう少し大きい方が見やすい。
そこで、ブログサイトでは次のように設定した。
font-size: calc(1rem + 1px + 0.25vw);
vw は端末の横幅の単位で、100 vw がその端末の横幅の解像度になる。
この設定で、幅 400 px のスマホで 18 pxになり、さらに画面幅に応じて拡大される。
まとめ
- 文字の大きさは 18 px 以上
- サイズの指定に 1rem を入れる
前の記事
オリジナルのブログ記事