【HTML/CSS】無難で平均的な文字色とフォントサイズ

ウェブサイトを作るとき、カスタマイズするとき、全体的なデザインはけっこう目が行くんですが文字色やフォントサイズといった細かい部分っておざなりになりがちだと思うんです。

わたし自身、文字色やフォントサイズはCSSゴリゴリ書いていく初期段階でパパっと仮止めしたままの値になってる…、なんてことが趣味で作ってるときは結構あります。

ここでは多くのサイトで採用されている平均的な、こうしておくと無難だよっていう文字色とフォントサイズを紹介しておきます。

平均的な文字色

ウェブサイトで一番よくつかわれている文字色は「#333333」。#000000がホントの真っ黒なのでちょびっとグレーよりの黒になります。

#000000の真っ黒だとパソコンやスマホの明るさが明るいと背景とのコントラストで目がちかちかしちゃって文字を読むのがしんどくなっちゃうから#333333が平均となっています。

ただ、背景色が白じゃなくってこのブログみたいに色がついてるときは必要に応じて#222222だったりと文字色を濃くしていきます。

個人的には#555555くらいの文字色も淡い感じがして好き。

平均的なフォントサイズ

次にウェブサイトでよく使われるフォントサイズなんですが、これは年々大きなフォントサイズが好まれるようになっている気がします。

例えば本文のフォントサイズをみてみても、昔は15pxとかもぜんぜんあったんですが最近はあんまりみなくなってます。

最近ではパソコン用は17px、スマホ用は16pxくらいが平均的だと思います。

個人的にはスマホは画面も小さいので14px～15pxくらいが好きなんですが、フォントサイズが大きいと文字自体にインパクトがでてサイト全体に重厚感がでるので、できるだけ大きなフォントサイズが好まれるているんだと思います。

特にブログの場合は少しでも大きいフォントサイズが一般的になってきてます。

文字色、フォントサイズまとめ

ウェブサイトでよくつく使われている平均的な文字色とフォントサイズを紹介しました。

文字色は#333333から上げたり下げたりして背景色とのバランスをとれば言うことなし。

フォントサイズについてはぶっちゃけどんなサイトなのか、どれくらい情報を一画面にぎゅっと表示したいのかによっても変わってくるんですが、ブログみたいな文字が主体なウェブサイトなら17px、16pxがどっしりして読みごたえが増すのでよく使われてます。

このブログも最近の流行にのって、文字色を#333333、フォントサイズを17pxにしてます。

参考にしてみてくださいね。