あの大手サイトは、文章部分にどのようなフォント指定(font-family)をしているのか?

フォント

先日、サイトの文章部分のフォントは何がいいんだろう?と、ふと思いました。

というのも、文章部分のフォントは、読み手にとって読みやすい、負担にならないフォントの方がいいと思うからです。

そんなわけで「多くの人に読まれている大手サイトは、どんなフォントを使っているのだろう?」と調べてみることにしました。(※先に書いときますが、あまり参考になる結果ではないと思います。)

photo by Jackie Meredith

スポンサーリンク
レクタングル(大)広告

ニュースサイト

とりあえず、多くの人に文字が読まれるサイトと言えば、新聞記事などのニュースサイトです。

Yahoo!ニュース記事本文

Yahoo!ニュース

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

日本語名だけだったり.アルファベット名,日本語名の順番になっていたり、ちょっとちぐはぐな感じがします。

読売新聞

読売新聞の文章

font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;

朝日新聞

朝日新聞

font-family: sans-serif;

毎日新聞

毎日新聞

font-family: Meiryo,”Hiragino Kaku Gothic ProN”,sans-serif;

日本経済新聞

日経新聞

font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’MS Pゴシック’,sans-serif;

MSN産経ニュース

MSN産経ニュース

font-family: “Meiryo”,”メイリオ”,”MS PGothic”,”MS Pゴシック”,Osaka,sans-serif;

アルファベット名,日本語名の順番になっています。

SNSサイトとか

今や多くの人が、利用し、文章打ったり読んだりするSNSサイトのフォント指定。

Twitterのつぶやき部分

TwitterのTweet

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

Facebookの文章

Facebookの文章

font-family: Helvetica,Arial,’lucida grande’,tahoma,verdana,arial,”hiragino kaku gothic pro”,meiryo,”ms pgothic”,sans-serif;

Google+

Google+

font-family: Roboto,arial,sans-serif;

はてなブックマーク

はてなブックマーク]

font-family: Helvetica,Arial,’ヒラギノ角ゴ Pro W3′,Hiragino Kaku Gothic Pro,sans-serif;

Pocket

Pocket

font-family: chaparral-pro,serif;

大手ブログ

読者の多い大手ブログの文章部分のフォント指定。TopHatenarのトップ10位以内にあったブログをピックアップ。

ギズモード・ジャパン

ギズモード・ジャパン

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

GIGAZINE(ギガジン)

GIGAZINE(ギガジン)

font-family: ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,Segoe UI,Verdana,Arial,Helvetica,’MS Pゴシック’,sans-serif,MS UI Gothic;

ライフハッカー[日本版]

ライフハッカー[日本版]

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

運営が一緒なので、ギズモードと同じですね。

コリス

コリス | サイト制作に関する最新の情報をご紹介

font-family: sans-serif;

S-MAX(エスマックス)

S-MAX(エスマックス) – スマートフォンとモバイルを活用するブログメディア

font-family: Verdana,sans-serif;

その他

文章メインではありませんが、一応ユーザーが多そうなサービスや、ショッピングサイトの文章箇所のフォントも調べてみました。

CSSのfont-family指定はこれで決まり!(2013春) – 遠近法ノートに書かれていますが、文章メインのサイトのフォント指定の参考にはならないと思います。

大手サイトは参考にしない。
Yahoo!とかAmazonとかAppleとか、古くからある大手サイトのfont-family指定は、お手本になりません。
担当になったつもりで考えれば想像がつくと思いますが、大元のCSSを変えたらいろんなところに影響が出るかもしれないわけで、そんなリスクを取りたくはないですよね?
あの手のサイトは、ずっと大昔の指定をそのまま残しているだけです。今からまねをしてはいけません。

Google検索結果の説明文

Googleの説明文

font-family: arial,sans-serif;

YouTubeの文章

YouTube

font-family: arial,sans-serif;

さすがにGoogleと一緒ですね。

ニコニコ動画の動画の説明文

ニコニコ動画、動画の説明文

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

Amazonの商品説明文

Amazonの商品説明文

font-family: Verdana;

楽天ショップの商品説明

楽天ショップの商品説明

font-family: sans-serif;

Yahoo!ショッピングの商品説明

Yahoo!ショッピングの商品説明

font-family: sans-serif;

参考になるサイト

CSSでのフォント指定については、以下に詳しく書かれています。これらの記事を読んでから、上記のフォント指定を見ると、また違って見えてくるかもしれません。

全然関係ないんですけど、メイリオフォントの「メイリオ」って「明瞭」から来ていたんですね。今回、いろいろのサイトを見ていて初めて知りました。

まとめ

それにしても、ニュースサイトにしてもSNSにしても、結構それぞれ違った指定がしてあるものですね。

“Hiragino Kaku Gothic ProN”が結構使われてないのにも驚きました。使っているのは毎日新聞ぐらい。

傾向としては、日本語フォントなら、Macならほぼ「ヒラギノ角ゴ」系。Windowsは、「メイリオ」と「MS Pゴシック」に分かれるといった感じです。合成フォントにするかしないかも、サイトの考え次第といった感じです。

とりあえず、いろいろなサイトのフォント指定を見てみたのですがあまり参考にはなりませんでした。なので参考サイトの記事を参考にした結果、当サイトでは以下のフォント指定を使用することにしました。

font-family:’Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;

Mac用に「ヒラギノ角ゴ」、Windows用に「メイリオ」、なかったらデフォルトのゴシックフォントを使用し、合成フォントは使わないという設定です。上にあるサイトならば一番近いのは、毎日新聞の指定です。毎日新聞の方は指定が逆で、メイリオが優先になっています。

結局なんだかんだで、最後は自分の好みです。

ただ、どれだけ一生懸命フォント指定を考えても、大事なのは中身(文章)なのは間違いないと思います。