More than 3 years have passed since last update.

【初心者向け】フォントサイズの指定は10pxより小さくはならない

Posted at 2021-03-09

どうも7noteです。フォントサイズの指定は10pxより小さくしないようにしましょう。

WEBサイトを作成するときにfont-sizeでフォントの大きさを指定できますが、
フォントサイズは10pxより小さくならないように気をつけましょう！

結論：いけないわけではないが、対応していないブラウザが多いので指定しても効かない。

たとえばGoogleChromeでfont-size:5px;と指定しても、効きません。
最も小さいサイズは10ｐxになります。

ではなぜブラウザで小さい文字に対応していないのか。
webサイトに訪問した人が読めるようにしましょうという意味で最も小さいものが10pxになっています。

PC表示であれば16px前後。スマホであれば14px前後を目安にデザインを作成するのが一般的です。その中でも小さい文字は10pxまでで作成するようにしましょう。

①cssで要素を縮小する

.mini-size {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
}

scale()で倍率を指定することができます。上の場合であれば、0.5倍、つまり半分のサイズになります。10pxを指定しているところにscale(0.5)を指定すれば、見た目的には5pxで表示しているのと同じことになります。

②画像にする

小さい文字でも画像にいしてしまえば表示することができます。

これらのように小さい文字を表示する方法はありますが、結局は**「訪問者が使いやすい、見やすいサイトになっているか」が重要**だと思います。
注意書きであまり見せたくないからといって小さな文字にするのは、見る人からすれば親切じゃないなと思うと思います。

小さくても11px〜12pxくらいがいいかなと思います。（※個人的な意見）