有名サイトのフォントを調べて font-family 指定の参考にする
どうも、font-family をまだ検討している者です。
今回はフォント指定の参考のため、有名っぽいサイトの font-family を調べました。
以下、本文のフォント、色、サイズを記載しています。
※本文がないサイトのサイズは省略
目次
Google 検索
Google 検索結果、説明文のフォントです。
font-family:arial, sans-serif;
color:#4d5156;
font-size:14px;
説明文のフォントサイズは結構小さいんですね。検索結果のタイトルは 20px。
Google ニュース
font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
color:#202124;
-webkit-font-smoothing: antialiased;-webkit-font-smoothing: antialiased;が指定されていて、私の Mac で見ると文字はかなり細く見えます。
Yahoo! ニュース
Yahoo! JAPAN のトップページは本文がないので、Yahoo! ニュースの記事ページのフォントをピックアップしました。
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#333333;
font-size:16px;え、Osaka とか MS Pゴシックが入ってるんですね。
古典的というか、古いシステムにも対応できるようにしているのか、アップデートされていないだけなのか。
Amazon
商品ページのフォントです。
font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
color:#0F1111;font-family はオーソドックスかつシンプルなパターンの指定ですね。
文字色はけっこう濃い目。
Wikipedia
font-family:sans-serif;
color:#202122;
font-size:calc(1em * 0.944);潔い。
私も以前はこの指定にしていたことがありますが、総称フォントのみの指定はやめたほうが良いようです。
2021年に最適なfont-familyの書き方 - ICS MEDIA
サイズは、私のブラウザで見たところ 15.104px となってました。ちょい小さめなんですね。
YouTube
font-family:"Roboto","Arial",sans-serif;
color:#030303;Google ニュース同様、Roboto が最初の指定。
font-family:"Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color:#0f1419;
font-size:15px;system-ui は、OS の UI と同じフォントを指定する方法です。
-apple-system と BlinkMacSystemFont は、iOS・macOS で欧文に San Francisco を表示する指定です。
-apple-system が Safari 用、BlinkMacSystemFont が Chrome 用。
また -apple-system は、iOS と macOS の Safari において、和文に 1px 程度小さいヒラギノを表示するようです。
※対応バージョンは未調査ですが、私の iPhone（iOS 15.3.1）とMac（10.15.7 Catalina）の Safari では 1px 程度小さいヒラギノが表示されています。
Apple
font-family:"SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#1d1d1f;Qiita
記事ページのフォントです。
font-family:-apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
color:#333333;
font-size:16px;-apple-system は BlinkMacSystemFont とセットで指定されることが一般的に多いと思うんですが、-apple-system だけの指定なんですね。
note
記事ページのフォントです。
font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
color:#222222;
font-size:18px;文字サイズが意外にも大きめ。１カラムのレイアウトだし、-apple-system の指定で 1px 小さくなることも想定されているのかもしれません。
Bootstrap
https://getbootstrap.jp/docs/5.0/getting-started/introduction/
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
color:#212529;
font-size:1rem;絵文字も指定されてますね。
文字サイズは 16px。
NHK
ニュース記事ページのフォントです。
font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Sans","ヒラギノ角ゴシック","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
color:#333;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;クロネコヤマト
https://www.kuronekoyamato.co.jp/
font-family:游ゴシック体,YuGothic,游ゴシック,Yu Gothic,ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,Arial,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
color:#141414;游ゴシック！
CookPad
font-family:-apple-system, "Roboto", "Helvetica Neue", "Droid Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ", "Osaka", "MS PGothic", arial, sans-serif;
color:#3c3c3c;ソフトバンクグループ
font-family:FrutigerNeueLTW1G-Book, "FP-ヒラギノUD角ゴ StdN W3";
color:rgb(51, 51, 51);欧文、和文ともに有料フォントが使用されています。
色はカラーコードで #333333。
KDDI ウェブコミュニケーションズ
https://www.kddi-webcommunications.co.jp/
font-family:"Montserrat" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
color:#333c4e;
-webkit-font-smoothing: antialiased;NTT ドコモ
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
color:#333333;無印良品
https://www.muji.com/jp/ja/store
商品ページのフォントです。
font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif;
color:rgb(60 60 67);
-webkit-font-smoothing: antialiased;優先順位が ヒラギノ or メイリオ → 游ゴシック となっており、ちょっと謎。游ゴシックが表示されるパターンってあるんだろうか。
文字色は、カラーコードに直すと #3c3c43 でした。
ユニクロ オンラインストア
font-family:"\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3","Hiragino Kaku Gothic Pro","Hiragino Sans","Noto Sans CJK JP",Osaka,Meiryo,メイリオ,"MS PGothic","\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF",YuGothic,"Yu Gothic","Hiragino Sans GB",Helvetica Neue,HelveticaNeue,Helvetica,Noto Sans,Roboto,Arial,"Arial Unicode MS",sans-serif;
color:#1b1b1b;16進表記のUnicode という形式で指定されているようです。ほかでは見ないですが...
トップページでは、文字色は他にも黒色のパターンで複数使用されていました。
font-family のまとめ・所感
font-family に関しては、基本的にはヒラギノとメイリオが中心に使われていると考えて良さそうです。
ヒラギノが先かメイリオが先かという指定の順番はサイトによって微妙に違いますが、Mac → Windows の順番が一般的なように思います。
MSP ゴシックと Osaka が、Yahoo! ほか企業サイトでもちょこちょこ指定されていたのが少し驚きでした。メイリオやヒラギノが入ってないパソコンってまだ使われているのでしょうか。
また、フォント名を英語と日本語の両方で書いてあるケース（メイリオ, Meiryo 等）がありますが、現在では日本語は不要のようです。
2021年に最適なfont-familyの書き方 - ICS MEDIA
今回調べたなかでは、Twitter の指定がシンプルかつ Mac のシステムフォントも入ってるので良さそうかなぁと現状では思っています。
文字色に関しては、一般的には真っ黒（#000000）ではないほうが良いとされていますが、思っていたよりも濃い黒が使われている印象でした。
私も以前は #333333 や #454545 を使っていたのですが、最近はなんだかグレー色が読みにくく感じて文字色は少し濃くしています（#252525）。今回調べたサイトも濃い目だったので傾向的には合っていてよかった。
引き続き検討する予定です。
※追記
検討した結果、当ブログでは現在以下のフォントを指定しています。
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'BIZ UDGothic', Meiryo, sans-serif;
iOS、macOS の欧文は、きれいで読みやすい San Francisco を指定。和文は Hiragino Sans。Hiragino Kaku Gothic ProN と同じフォントだがウェイトが多いのが特徴。
Windows の欧文は、Arial と比較して読みやすく感じた Segoe UI を選択。和文の第一指定としてはメイリオではなく BIZ UDGothic を選択。理由はメイリオよりも読みやすくてクセがないように感じるため。
（Windows PC を持っていないので、持っている Mac に BIZ UDGothic をインストールして見え方を確認）
本当は Google Fonts の Noto Sans Japanese を使いたいのですが、ページ表示時のちらつきが大きく現状では断念しています。
ちなみにフォントサイズは 16.4px と少しだけ大きめに指定しています。
▼ 関連記事
ページ表示速度を落とさずに、非同期読み込みで Google Fonts を使う【高速化】
できるだけページ表示に影響を与えずに Google Fonts を読み込む方法を調べたので紹介します。
ブログに画像を載せるときに知っておきたいこと
今回は、画像をブログに載せるときの注意点を紹介します。 画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。
