有名サイトのフォント(font-family)を調べてみた10選

自分のサイトでフォントを指定するとき、CSSのfont-familyに何を記述すればいいのか悩む。そこで、よく覗きにいく有名なサイトのフォントを調べてみた。読みやすく、見やすい字体は訪問者の印象を決める。

以下は、2018年2月現在のフォント。コードはすべて本文に当てられているものだ。

indienative

最新のインディーズ系音楽を紹介しているサイト。
http://www.indienative.com/

font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;

Qiita

プログラマのための技術情報共有サービス。
https://qiita.com/

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;

note

文章、写真、イラスト、音楽、映像などを手軽に投稿できるクリエイターと読者をつなぐサービス。
https://note.mu/

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;

WIRED

最新のテクノロジーからカルチャーまでを紹介しているメディア。
https://wired.jp/

font-family: "Helvetica Neue",Helvetica,Arial, YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS ゴシック","MS Gothic",sans-serif;

FUZE

ギズモードから派生した、デジタルカルチャーを中心としたメディア。
https://www.fuze.dj/

font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ", sans-serif;

ナタリー

音楽、映画、コミックなど幅広いポップカルチャー情報を発信しているサイト。
https://natalie.mu/

font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', sans-serif;

CINRA.NET -シンラ

音楽、アート・デザイン、映画、演劇、ダンスなどの情報を提供するカルチャーニュースサイト。
https://www.cinra.net/

font-family: '游ゴシック',YuGothic,KoburinaGo-W3-83pv-RKSJ-H,Helvetica,Arial,'Hiragino Kaku Gothic ProN','MS Pゴシック',Meiryo,sans-serif;

ギズモード・ジャパン

日本最大級のガジェット&テクノロジーサイト。
https://www.gizmodo.jp/

font-family: "Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;

VOGUE JAPAN

ファッション誌『VOGUE JAPAN』の公式サイト。
https://www.vogue.co.jp/

font-family: "Helvetica Neue",Helvetica,Arial,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"Helvetica Neue",Helvetica,Arial,"MS Pゴシック","MS PGothic",sans-serif;

アイデア

グラフィックデザイン誌「アイデア」の公式サイト。
http://www.idea-mag.com/

font-family: 'LinotypeUniversW01-Regu', 'YuGothic', 'Yu Gothic','游ゴシック','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

10サイトのfont-familyを眺めてみて……

それほど変わらないといえば、そうかもしれない。Macなら「-apple-system」と 「BlinkMacSystemFont」で指定しているかどうかとか、Windowsなら游ゴシックとメイリオの優先度あたりが気になるぐらいだ。実サイトではフォントのサイズや色も含めて、さまざまな工夫がされている。ちなみに、このサイトで参考にさせてもらったのはQiitaだった。ほぼ、同じコードをCSSに打ち込んでいる。