ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。
最近はもっぱらNoto Sans Japaneseを使うことが多いのですが、いま改めて有名ウェブサイトのフォントの指定方法を調べてみて、ベストな指定方法を考えてみようと思いました。
結論
まずは結論ですが、ウェブフォントを使わない場合は、
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Arial, sans-serif;
が無難な指定なんじゃなかろうかと思いました。
調査結果
とりあえず、GAFA（Google、Apple、Facebook、Amazon）と、Microsoft、Twitter、Instagramのfont-familiyの指定を調べました。
アクセスしたエリアやデバイスによって、font-familyの記述を出し分けている可能性もありますが、調査は日本からMacのChromeでアクセスした際のfont-familiyをディベロッパーツールで調べるというやりかたで調べました。
font-family: arial, sans-serif;
とにかくシンプルです。arialは欧文フォントなので、和文はsans-serif（ブラウザのデフォルトのフォント）で表示されます。
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;
最優先は、SF Pro JP（和文）と SF Pro Text（欧文）。San Francisco系のフォントを指定しています。
San FranciscoといえばiOS 9から採用されている、Appleが開発したフォント。自社で作ったフォントが最優先になっています。
font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;
キーワードが多くなってきました。
まず、system-ui。
この汎用フォントファミリを使用すると、UAが実行されているプラットフォームでデフォルトのユーザーインターフェイスフォントを使用してテキストをレンダリングできます。クロスプラットフォームUAは、サポートされているさまざまなプラットフォームでさまざまなフォントを使用する必要があります。 system-uiの目的は、WebコンテンツをネイティブOSのルックアンドフィールと統合できるようにすることです。
※ https://drafts.csswg.org/css-fonts-4/#system-ui-def より引用（Google翻訳で翻訳）
Can I useで調べると、主要ブラウザの最新版はカバーしているっぽい。（IEは非対応）
次に、-apple-system、BlinkMacSystemFont。これは現状両方San Franciscoと評価されるようです。
なんなら、iOS、MacOS、watchOSではsystem-uiもSan Franciscoになるようなので、最新の環境では不要そうです。
Amazon
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
非常にオーソドックスな書き方です。 なんだか安心します。
Microsoft
font-family: 'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;
最優先はSegoe UI。最優先すぎて、スペースの有り無しの2バージョン指定してあります。
font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
Segoe UIといえば、Microsoftが推しているイメージなので、明示的に書かずとも、Windowsでsystem-uiはSegoe UIになるんじゃなかろうかと思いましたが、バージョンによってはそういうわけでもないようで、Segoe UIを最優先として指定しているっぽいです。
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
Apple系デバイスではSan Francisco、Microsoft系デバイスはSegoe UIで表示するようです。
Facebookの指定と違うのが意外でした。
なんとなく游ゴシックが人気なイメージがあったのですが、指定しているサイトがないのが意外でした。
フォントの指定を考える
そんなわけにもいかないケースがあることも重々承知ながら、ブラウザがOSに載っている以上、system-uiを指定するのが一番いいんじゃなかろうかと思いました。
明示的に指定しているものを見ると、まずはヒラギノ角ゴシック、次点でメイリオが人気なので、それに倣うのであれば、
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3, Meiryo', メイリオ, Arial, sans-serif;
で良いような気がしました。AppleからApple系のフォントを引いた形であり、AmazonにArialを足した形です。
あと、気になるところとしてはシングルコーテーションとダブルコーテーションが混ざった指定をしているサイトがいくつかあったのですが、理由があるのでしょうか。
また、スペースが含まれたフォント名なのでコーテーションで囲わない指定もいくつかありましたが、もはや囲う必要はないのでしょうか？
僕は心配性なので、一応シングルコーテーションで囲っておきました。
