世間の font-family 設定を軽く調べた

normalize.css にはバグフィックス以外の font-family 設定がない。フォントも「味付け」の一つと考え、「ノーマライズ」CSS としては何も適用していないのだろう。

しかし、現実的には、serif ではなく sans-serif 系のシステムデフォルトフォントを使わせるよう指定することがほとんどだ。拙作の @neos21/neos-normalize も、オレオレ設定でスタイルを当てているが、他のノーマライズ系の CSS ライブラリや、有名なウェブサイトはどのような設定にしているのか、調べてみた。

目次

• ライブラリ系
  • sanitize.css
  • shoelace-css
• ウェブサイト
  • Qiita
  • Twitter
  • Facebook
  • Instagram
  • GitHub
  • Typetalk
  • Backlog
  • Tumblr
  • CodePen
  • Google
  • Wikipedia
  • Gizmodo Japan
  • GIGAZINE
  • はてなブックマーク
  • Coliss コリス
  • gori.me
• 総評
• 参考

ライブラリ系

sanitize.css

• 参考：GitHub - csstools/sanitize.css: A best-practices CSS foundation

html {
  font-family:
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI,
    /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu,
    /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 5+ */ Noto Sans,
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}

pre, code, kbd, samp {
  font-family:
    /* macOS 10.10+ */ Menlo,
    /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono,
    /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 5+ */ Noto Mono,
    /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono,
    /* fallback */ monospace;
}

拙作の @neos21/neos-normalize に似た思想か。英語圏向けの設定なので、日本語対応はこのままだと不十分ではあるが。

Android 向けに Roboto や Roboto Mono を書いている他、Linux ディストリビューション別のフォント指定が豊富。Ubuntu・Cantarell・Noto Sans や、Ubuntu Monospace・Noto Mono・Oxygen Mono・Liberation Mono あたり。

shoelace-css

• 参考：GitHub - claviska/shoelace-css: A back to the basics CSS starter kit.
• 参考：shoelace-css/variables.css at master · claviska/shoelace-css · GitHub

:root {
  /* Fonts */
  --font-sans-serif: sans-serif;
  --font-serif: serif;
  --font-system: system-ui;
  --font-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

最低限の定義、という感じ。DejaVu Sans Mono はフリーのフォントみたい。

ウェブサイト

ココからはライブラリではなく、一般的なウェブサイトの font-family 指定を、開発者ツールで調べてみた。

Qiita

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

pre, code {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
}

フォントは html 要素ではなく body 要素で指定していた。この辺未だに違いがよく分からん。日本語向けにヒラギノとメイリオが入っているが、英字フォント優先。等幅フォントは日本語の考慮なし。

Twitter

body.ja {
  font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

body.ms-windows {
  font-family: "Segoe UI",Arial,sans-serif;
}

body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

body.ar, body.ur, body.fa {
 font-family: Tahoma,Arial,sans-serif;
}

Twitter は日本語向けのフォント指定と、Windows 向けフォント指定を別々に持っていた。JS で制御しているっぽい。日本語環境で最終的に適用されるのは body.ja だった。「ヒラギノ → Osaka」「メイリオ → MS P ゴシック」と、「Mac 向け」「Windows 向け」の順で設定している様子。日本語環境では Segoe UI を使わず Arial のみ指定している。

Facebook

body, button, input, label, select, td, textarea {
  font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
}

Facebook はかなりシンプル。日本語も考慮したフォント指定はヒラギノ・メイリオ・MS P ゴシックだが、それも英字で表現できる方だけを指定している。

Instagram

body, button, input, textarea {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

Twitter・Facebook は -apple-system を使っていなかったが、Instagram では BlinkMacSystemFont まで併用して使用している。Mac と iOS はコレで押さえ、Windows 向けに Segoe UI、Android 向けに Roboto を併記している。最後は Helvetica と Arial でレガシーな Mac と Windows 向けにフォールバック、という感じ。

GitHub

html {
  font-family: sans-serif;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

前半は Instagram に近く、Robot がいないぐらいの違い。後ろに絵文字フォント指定が入っている。

Typetalk

html[lang="ja-JP"] body {
  font-family: Open Sans,Hiragino Sans,ヒラギノ角ゴシック,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,メイリオ,Arial,sans-serif;
}

body {
  font-family: Open Sans,Hiragino Sans,Meiryo,Helvetica,Arial,sans-serif;
}

pre, code {
  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
}

Open Sans は Google Web Fonts で提供されているフォント。Noto Sans よりも少し細いかしら。

• 参考：Differences - Open Sans & Noto Sans … Open Sans と Noto Sans の比較。

Hiragino Sans とヒラギノ角ゴシックは、OSX 10.11 El Capitan 以降で使えるようになったフォント。従来の「ヒラギノ角ゴ ProN」などとほぼ同等だが、-webkit-font-smoothing: antialiased; との親和性が高いとかで、モダン環境向けに入れておくと良いのかも。Windows はブラウザに関わらず使えないプロパティなので、あくまで Mac 向け。

• 参考：'Hiragino Sans'、'ヒラギノ角ゴシック'と'游ゴシック'をfont-familyに追加した - E-riverstyle Vanguard
• 参考：2016-17年最強の Font Family 設定 ゴシック体 – ミルログ
• 参考：Can I use... Support tables for HTML5, CSS3, etc

Backlog

html {
  font-family: sans-serif;
}

html.windows body {
  font-family: 'Open Sans',Meiryo,'メイリオ',Arial,sans-serif;
}

html:not(.windows) body {
  font-family: 'Open Sans', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Helvetica Neue', Helvetica, Arial, sans-serif
}

code {
  font-family: Consolas, Menlo, Courier, Monaco, monospace, sans-serif;
}

Typetalk と同じヌーラボのサービスだが、指定内容には違いがある。Open Sans は Windows・Mac 両方に使うようにしているが、それ以降は html 要素に付与する CSS クラスで条件分けしている。Windows はメイリオ、Mac はヒラギノ系を優先的に指定し、後ろの方で Arial や Helvetica Neue を指定している。

等幅フォントの内訳は Typetalk とよく似ているが、順番が違う。

Tumblr

body {
  font-family: Helvetica Neue,HelveticaNeue,Helvetica,Arial,sans-serif;
}

ドシンプルに Helvetica 系と Arial のみ。

CodePen

html {
  font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
}

Lato は Google Fonts。Lucida Grande は Mac 用。Lucida Sans Unicode は Lucida Grande とほぼ同じフォントで、Windows プリインストール系。落ち着いている。

Google

• 検索結果ページなどは以下のとおり。

body, html, input {
  font-family: arial,sans-serif;
}

• Google Keep : Roboto だけ増えてる。「ドキュメント」「スプレッドシート」もこんな感じだった。

body {
  font-family: 'Roboto',arial,sans-serif;
}

• Gmail : RobotoDraft。Roboto と併用するほどか？
  • 参考：Comparison of Roboto Draft vs Roboto

body, input, textarea, select, td {
  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}

• Google カレンダー : Noto Sans JP が登場。

body, html {
  font-family: Roboto,"Noto Sans JP",Helvetica,Arial,sans-serif;
}

Wikipedia

html, body {
  font-family: sans-serif;
}

日本語版も英語版も同じだった。総称ファミリ任せ。

Gizmodo Japan

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

游ゴシック指定があるが、「游ゴシック体」とは書いていないので、「游ゴシック」指定は Windows 向け。次の「YuGothic」は「Yu Gothic」ではないので Mac 向け。あとはヒラギノとメイリオ。

GIGAZINE

html {
  font-family: sans-serif;
}

h1, h2, h3, h4, a, p, span, blockquote, li, th, td, dt, dd, input {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "San Francisco", "Segoe UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Roboto", Verdana, Arial, Helvetica, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif, MS UI Gothic;
}

html や body で設定しない例。見出しや p 要素に直接フォント指定を入れている。内容は英字フォント指定が優先気味だが、Roboto や Arial の位置はなんか微妙。また、San Francisco を明記している。ヒラギノは ProN ではなく Pro を指定。sans-serif より後ろに MS UI ゴシックがいるのが面白い。

はてなブックマーク

body {
  font-family: Helvetica,Arial,Roboto,sans-serif;
}

意外にも日本語向けの指定なし。Helvetica か Arial の記載があれば、Android 向けには Roboto の表記は要らないらしいのだが、書いているパターンが多い。

Coliss コリス

body {
  font-family: "Rounded Mplus 1c";
}

何やら潔い指定。使っているのはコレかな？

• 参考：Google Fonts

@font-face にて、font-display: swap; のみ指定していた。

• 参考：font-display - CSS: カスケーディングスタイルシート | MDN

gori.me

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

「游ゴシック体」「Yu Gothic」で Mac は游ゴシック体を指定。Windows も「YuGothic」で指定。ヒラギノ・メイリオのフォールバック、Osaka・MS P ゴシックでさらにフォールバック、という日本語サイトの理想的な流れ。和英混在フォントを積極的に使う構成だ。

総評

• 海外のサイトに「ヒラギノ」や「メイリオ」が指定されていることは少なく、Helvetica Neue・Segoe UI あたりが中心だった。
• 主に Android 向けの Roboto は表記があったりなかったり。Android の仕様としては「Helvetica」「Arial」あたりのフォント名が出てくると Roboto フォントを使用するらしいので、書かなくても問題にならないのかも。
• 日本語サイトの游ゴシック使用率は微妙。未だヒラギノとメイリオのセットが多いか。Osaka や MS P ゴシックまでフォールバックを用意している例は多くはなかった。
• 等幅フォントに至っては和英混在の場合も等幅に見せるよう調整しているサイトは皆無だった。みんな気にならないのか…？

こんな感じ。拙作の @neos21/neos-normalize がゴリゴリに指定しすぎなのかもしれない…。

参考

• font-familyの指定に迷ったら、有名サイトを参考にしてみよう。 … 同様の企画。