みかづきブログ・カスタム

基本的にはちょちょいのほいです。

GAFAのfont-familyを調べて、フォントの指定を再考する 📝

f:id:kimizuka:20211020154011p:plain


ウェブサイトを作るときの重要な要素のひとつにフォントの選定があります。
最近はもっぱら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をディベロッパーツールで調べるというやりかたで調べました。

Google

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, MS Pゴシック, Helvetica Neue, Helvetica, Arial, sans-serif;

最優先は、SF Pro JP(和文)と SF Pro Text(欧文)。San Francisco系のフォントを指定しています。
San FranciscoといえばiOS 9から採用されている、Appleが開発したフォント。自社で作ったフォントが最優先になっています。

Facebook

font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;

キーワードが多くなってきました。
まず、system-ui。

drafts.csswg.org

この汎用フォントファミリを使用すると、UAが実行されているプラ​​ットフォームでデフォルトのユーザーインターフェイスフォントを使用してテキストをレンダリングできます。クロスプラットフォームUAは、サポートされているさまざまなプラットフォームでさまざまなフォントを使用する必要があります。 system-uiの目的は、WebコンテンツをネイティブOSのルックアンドフィールと統合できるようにすることです。

https://drafts.csswg.org/css-fonts-4/#system-ui-def より引用(Google翻訳で翻訳)

Can I useで調べると、主要ブラウザの最新版はカバーしているっぽい。(IEは非対応)

caniuse.com

次に、-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バージョン指定してあります。

Twitter

font-family: "Segoe UI", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;


Segoe UIといえば、Microsoftが推しているイメージなので、明示的に書かずとも、Windowsでsystem-uiはSegoe UIになるんじゃなかろうかと思いましたが、バージョンによってはそういうわけでもないようで、Segoe UIを最優先として指定しているっぽいです。

Instagram

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を足した形です。

あと、気になるところとしてはシングルコーテーションとダブルコーテーションが混ざった指定をしているサイトがいくつかあったのですが、理由があるのでしょうか。
また、スペースが含まれたフォント名なのでコーテーションで囲わない指定もいくつかありましたが、もはや囲う必要はないのでしょうか?
僕は心配性なので、一応シングルコーテーションで囲っておきました。