font-familyには何を指定すればいい?

font-familyを読みやすい字体で指定することは、ネットのエチケットともいえる大切な要素です。コンテンツがよければ、少しぐらいデザインがまずくても読んでもらえますが、読みやすい字体を指定することは少しの努力で最も効率的な成果を生みます。

例えば、デフォルトのCSSにfont-family: meiryo;などと数文字程度を加えるだけで、ページビューや滞在率、離脱率などがけっこう改善してしまうものです。SEOだ、コンテンツだと多大な努力をする前に、まずはfont-familyで読みやすい字体を指定するようにしましょう。

font-familyはmeiryo(メイリオ)がよいのか?

これはぼくの主観ではありますが、一番ぶなんなfont-familyはmeiryoではないかと思います。当サイトでも「メイリオ」を指定していますが、MSゴシックよりも読みやすいと感じてます。

この仮説を確かめるべく、メジャーどころのサイトでFont Familyをチェックしてみたのですが、結果は以下のようになりました。


日経:

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",sans-serif;

産経:

font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"MS Pゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;

ロイター:

font-family: "Hiragino Kaku Gothic Pro","Meiryo","MS Pgothic",knowledge-reg,helvetica,arial,sans-serif;

CNN:

font-family:  "メイリオ", Meiryo, Tahoma, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

ヤフーニュース:

font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;

時事通信:

font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"MS Pゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;


上記のように、「メイリオ」が指定されているケースが多いです。

ただ、「Hiragino Kaku Gothic Pro」で指定されているケースも多く見受けられます。windowsにはヒラギノ系の書体が入っていないので、指定しても意味がないと思い、ぼくはずっとシカトしてきましたが、mac用に指定している人も多いです。

なので、windowsに限ってみれば、ヒラギノ系を指定しても適用されませんので、ほぼ、だいたいのサイトでメイリオで指定されていると考えてもよいでしょう。

一方、macではヒラギノ系が読みやすいので、まずはヒラギノ系を指定しつつ、メイリオという流れなのだろうと思われます。ブラウザによって日本語の場合は反映されないケースもあるため、"メイリオ",Meiryo,などのように併記されているケースも多いです。

ちなみに、全角文字についてはダブルクォート(")で指定することをおすすめします。空白を含む場合もクォートが必要だった気もするのですが、指定していないケースもあるようなので記憶違いかもしれません。

他のフォントも試してみたりもしたのですが、一見すると見やすいと思うことがあったとしても、長時間読むには堪えないフォントが多いです。何も指定しない場合、windowsではMS PGothicあたりで表示されると思うので、メイリオを指定しておくのがぶなんではないかなと思います。

ちなみに、このチェックの仕方ですが、chromeなどのブラウザで文章を選択しつつ、右クリックをすると「検証」という箇所がありますので、font-familyの箇所をチェックすれば、簡単に調べることができます。