サイトのデザインにおいて最も重要で大切な要素は『文字の見やすさである』
私がまだHTML? CSS?という時にどこかのサイトでこんな風な名言を見た気がする。
今となっては文字の見やすさ、つまり文字の大きさとかフォントの種類だとか、色だったり背景色がいかに見る側に大きな影響を与えるかがちょっとづつ分かってきた気がするが、このブログを始めた当初は何もかもがホントちんぷんかんぷんで、フォントのいじり方はおろか、どれくらいの大きさにしたらいいのかということすらわからなかったのだ。
Ads by Google
見る側になって考えてみればわかるだろう
まぁそう言われればそうだが、HTML? CSS?という時にそんなこと言われても、フォントのいじり方がわかったからといって、正直何がいいのかホントに困る。ましてやサイトの雰囲気や配色、内容によってもいくらでも変わりえるフォントの種類やサイズ、色というのは初心者にとっては選択が難しい。
題して：100のサイト＆ブログで使われているフォントサイズと色の中で、一番多く使われているメジャーな組み合わせは一体なんだ？
はてなブックマークや私のブックマークから無作為に選んだサイト＆ブログ。
リンク忘れを後になって気づいたため、ノーリンクです。（すいません 検索してね）
まずはフォントのサイズ。Excelで集計して簡易的に表にしてみた。結果からいうと一番使われているフォントのサイズは16pxであり、次に多く使われているのが14pxであることがわかった。これは集計してみて気づいたことだが、ニュース系のサイトにおいて最も一番使われていたサイズというのが16pxであった。読み手の層を限定しないニュース系のサイトでは、どの年代の人にもハッキリと見える比較的大きいフォントが使われているようだ。また、文字がメインとなるサイトでも大きく視認性の高い大きなフォントが使われている傾向が見られた。 （因みに今回集計するにあたって、サイトやブログが属する任意のカテゴリを設定し、カテゴリ別での集計が出来るようにしている）
円グラフを見てもわかるが、最もよく使われているサイズの16px以上のフォントは17pxだけであった。特殊なサイトで無い限り、文章などの文字の大きさの限界は17px辺りのようだ。
参考までに標準でのフォントのサイズ一覧
www-archive.mozilla.org/newlayout/testcases/css/sec526pt2.htm
次はフォントカラー。今回調べたサイト＆ブログのフォントカラーの一覧が左の表だ。どのサイト＆ブログもベースとなる基本的なフォントの色というのは黒で、赤や青といった変わった色は無かった。ただ黒色の濃さというのがサイトによって結構色々あり、100のサイト＆ブログで19の濃さ違いの色があった。その中でもダントツで一番多かった色というのが『#333333』で、全体の約40%がこの色を使っていた。また、フォントサイズで一番多かった『16px』を使っているサイトの約半分がこの色を使っていた。 2番目に多かった色は以外にも『#000000』の純黒で、全体の約20%のサイトが使っていた。これも集計して初めてわかったことだが、大手のニュース系サイトの殆どがこの色を使っていた。
『#333333』と『#000000』だけで全体の65%、つまり約半分以上のサイト＆ブログでこの２つの色が使われていることがわかる。 
フォントサイズの集計結果とフォントカラーの集計結果からいうと、サイズでは16pxが全体の割合では多少多く、色では飛び抜けて#333333が多いということがわかった。
まとめると、文字の大きさは視認性の高い16pxにしつつも、色の濃さを#333333にすることで文字の圧迫感を抑えた形というのが現在のWEBページでのデフォルトという感じのようだ。
「ブログを始めたばかりでフォントのサイズと色を何にしたらいいか迷っている」という方は取り敢えず、サイズは『16px』、色は『#333333』に設定して、自分のデザインに合わなかったら変えていくという形をとるといいかもしれない。
