有名サイトのフォントを調べて font-family 指定の参考にする
どうも、font-family をまだ検討している者です。
今回はフォント指定の参考のため、有名っぽいサイトの font-family を調べました。
最終調査・更新日：2022/12/16
また、当ブログで採用した font-family は最後の見出しにまとめています。
目次
Google 検索
Google 検索結果、説明文のフォントです。
font-family:arial, sans-serif;
Google ニュース
font-family:"Google Sans",sans-serif;Google Sans は、Google オリジナルの英数字フォントのようです。一般公開はされていない様子。
和文に関しては sans-serif なので特に指定はしていないようです。
Yahoo! ニュース
Yahoo! JAPAN のトップページは本文がないので、Yahoo! ニュースの記事ページのフォントをピックアップしました。
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;Osaka や MS Pゴシックなど、古いフォントも指定されていますね。
古典的というか、古いシステムにも対応できるようにしているのか、アップデートされていないだけなのか。
Amazon
商品ページのフォントです。
font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;font-family はオーソドックスかつシンプルなパターンの指定ですね。
Wikipedia
font-family:sans-serif;潔い。
私も以前はこの指定にしていたことがありますが、総称フォントのみの指定はやめたほうが良いようです。
2021年に最適なfont-familyの書き方 - ICS MEDIA
YouTube
font-family:"Roboto","Arial",sans-serif;Google ニュース同様、Roboto が最初の指定。
font-family:"Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;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;Qiita
記事ページのフォントです。
font-family:-apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;-apple-system は BlinkMacSystemFont とセットで指定されることが一般的に多いと思うんですが、-apple-system だけの指定なんですね。
note
note のサイトは、見出しと本文、また OS によってフォントを設定し分けているように見受けられます。細かな設定条件は未調査。
font-family 例１
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Arial,Meiryo,sans-serif;font-family 例２
font-family:YakuHanJPs,"Segoe UI",Arial,Meiryo,sans-serif;YakuHanJPs は、カッコのみ半角にするWebフォント。ただ、設定の有無による見た目の変化はよくわかりませんでした。
YakuHanJP という、約物半角専用のWebフォントの一種のようです。
参考：Yaku Han JP - 約物半角専用のWebフォント
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";絵文字も指定されてますね。
NHK
ニュース記事のページと、番組ページとで、設定フォントが異なっているようでした。サイトの管轄が異なるのかもしれません。
ニュース記事ページ
font-family:Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Hiragino Sans,ヒラギノ角ゴシック,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif;番組ページ
font-family:"BIZ UDPGothic","Hiragino Sans","Meiryo",sans-serif;Windows 用のフォントとして、ニュースページではメイリオ優先、番組ページでは BIZ UDPGothic 優先で設定されていました。
クロネコヤマト
https://www.kuronekoyamato.co.jp/
font-family:游ゴシック体,YuGothic,游ゴシック,Yu Gothic,ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,Arial,ＭＳ Ｐゴシック,MS PGothic,sans-serif;游ゴシックの設定でした。
CookPad
font-family:Helvetica Neue, Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;メイリオよりも BIZ UDPGothic 優先です。
ソフトバンクグループ
font-family:FrutigerNeueLTW1G-Book, "FP-ヒラギノUD角ゴ StdN W3";欧文、和文ともに有料フォントが使用されています。
KDDI ウェブコミュニケーションズ
https://www.kddi-webcommunications.co.jp/
font-family:"Montserrat" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;Meiryo UI は、メイリオよりも文字幅が狭いです。個人的には文字が詰まりすぎていて読みにくいと感じます。
NTT ドコモ
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;無印良品
https://www.muji.com/jp/ja/store
商品ページのフォントです。
font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif;優先順位が ヒラギノ or メイリオ → 游ゴシック となっていますが、ちょっと謎です。游ゴシックが表示されるパターンはほぼないのでは。
font-family のまとめ・所感・採用したフォント
font-family に関しては、基本的には Mac：ヒラギノと Windows：メイリオが中心に使われていると考えて良さそうです。
ヒラギノが先かメイリオが先かという指定の順番はサイトによって微妙に違いますが、Mac → Windows の順番が一般的なように思います。
※追記：2022年12月に再調査したところ、いくつかのサイトではフォントの指定が変わっていました。メイリオよりも BIZ UDPGothic を優先するケースが出てきていました。（NHK、CookPad）
また、フォント名を英語と日本語の両方で書いてあるケース（メイリオ, Meiryo 等）がありますが、現在では日本語は不要のようです。
2021年に最適なfont-familyの書き方 - ICS MEDIA
今回調べたなかでは、Twitter の指定がシンプルかつ Mac のシステムフォントも入ってるので良さそうかなぁと現状では思っています。
引き続き検討する予定です。
※追記
検討した結果、当ブログでは現在以下のフォントを指定しています。
font-family: -apple-system, BlinkMacSystemFont,'Helvetica Neue','Segoe UI','Hiragino Sans','BIZ UDGothic',Meiryo,sans-serif;
iOS、macOS の欧文は Helvetica Neue。本当は -apple-system, BlinkMacSystemFont を指定して San Francisco を表示したいが、和文が 1px 小さく表示される問題がフォントサイズ調整のネックとなるため。
iPhone で見たときに、欧文は Helvetica Neue よりも San Francisco のほうが読みやすかったため -apple-system, BlinkMacSystemFont を指定。当ブログではスペイン語を掲載している記事も多いため、フォントサイズよりも欧文の読みやすさを優先することにした。
当ブログ訪問者のモバイルデバイスの割合を確認したところ、約３割が Android ユーザーでした。
iOS、macOS の和文は Hiragino Sans。Hiragino Kaku Gothic ProN と同じフォントだがウェイトが多いのが特徴。
Windows の欧文は、Arial と比較して読みやすく感じた Segoe UI を選択。
Windows 和文の第一指定としてはメイリオではなく BIZ UDGothic を選択。理由はメイリオよりも読みやすくてクセがないように感じるため。ただ、字間が詰まって見えるため、気になる場合は letter-spacing 等で文字間を調整する必要があると思われる。
プロポーショナルフォントの BIZ UDPGothic もあるが、約物（。や、など）の詰めが窮屈に見えるため BIZ UDGothic を採用。
欧文フォントを指定しない場合、BIZ UDGothic と BIZ UDPGothic では英数字の見え方も変わります。
以下の文章は、BIZ UDGothic, BIZ UDPGothic の比較です。Windows 11 での表示です。
本当は Google Fonts の Noto Sans Japanese を使いたいのですが、ページ表示時のちらつきが大きく現状では断念しています。
▼ 関連記事
ページ表示速度を落とさずに、非同期読み込みで Google Fonts を使う【高速化】
できるだけページ表示に影響を与えずに Google Fonts を読み込む方法を調べたので紹介します。
