font-familyを調べまわった結果のまとめ

はじめに

文章の読みやすさやフォントの綺麗さを考慮したfont-familyを選定します。なお、決定版は、下記のリンク先です。次に示す暫定案は当ブログでは、使用していません。

暫定案(もしくは、ただの全部載せ)

font-familybody, button, input, select, textarea {
  font-weight: 500; /* Winの游ゴシック対策 */
  font-family:
    -apple-system,                      /* Mac/iOS10-/iOS8-(英字:Helvetica) */
                                        /* macOS10.11+/iOS9+(英字:San Francisco) */
                                        /* iOS11+(和文:ヒラギノ) */
                                        /* # Safari/Firefox用 */
    BlinkMacSystemFont,                 /* Mac/iOS+?(英字:Helvetica) */
                                        /* macOS10.11+/iOS9+(英字:San Francisco) */
                                        /* # Chrome/Opera用 */
    'Helvetica Neue',                   /* Mac英字 (macOS10.10+) */
/*  Verdana,                            /* Win英字 (WindowsVista+) */
    'Segoe UI',                         /* Win英字 (WindowsVista+) */
    Helvetica,                          /* Mac/Win英字 (macOS10.0+, WindowsMe+?) */
    arial,                              /* Win英字 (macOS10.0+, WindowsMe+?) */
    Roboto,                             /* Android英字 (Android 4.1+) */
    'HiraKakuProN-W3',                  /* Mac和文 (iOS4+?) */
    'Hiragino Kaku Gothic ProN',        /* Mac和文 (macOS10.5-15) */
/*  'ヒラギノ角ゴ ProN W3',             /* # 同上(2個分) */
    'Hiragino Sans',                    /* Mac和文 (macOS10.11+, iOS9+) */
/*  'ヒラギノ角ゴシック',               /* # 同上 */
    'BIZ UDGothic',                     /* Win和文 (Windows10 October 2018 Update+) */
/*  'BIZ UDゴシック',                   /* # 同上 */
/*  'UD Digi Kyokasho NP-R',            /* Win和文 (Windows10 Fall Creators Update+) */
/*  'UD デジタル 教科書体 NP-R',        /* # 同上 */
    'Noto Sans CJK JP Regular',         /* 一般和文 */
    'Source Han Sans JP',               /* 一般和文 */
/*  YuGothic, /*'游ゴシック体',         /* Mac和文 (macOS10.9+, iOS6+) */
    'Yu Gothic', /*'游ゴシック',        /* Win和文 (Windows8.1+) */
/*  Osaka,                              /* Mac和文 (Classic Mac OS) */
    Meiryo, /*'メイリオ',               /* Win和文 (WindowsVista+) */
/*  system-ui,                          /* Mac/iOS+?(San Francisco, 和文未指定) */
                                        /* Windows8.1-(Segoe UI, Meiryo) */
                                        /* Windows10+(Yu Gothic UI, Yu Gothic UI) */
                                        /* Android+?(Roboto, Noto) */
                                        /* # CSS4仕様、現状Chrome56+, Opera43+のみ有効 */
    sans-serif;                         /* # 標準フォント */
/*  sans-serif,'Noto Sans Emoji','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; /* Emoji */
}
/* IE8-11 (IEの游ゴシック対策) */
@media screen\0 {
  body, button, input, select, textarea {
    font-family: arial, Meiryo, sans-serif;
  }
}

※+?: 既に存在しているが、初期バージョンかは不明

コードの補足

游ゴシック

游ゴシックの不具合対応の紹介のため、游ゴシックを使用するサンプルとなっています。これは、游ゴシックを推奨するものではありません。有名サイトを見る限り、游ゴシックはお世辞にも使用頻度は高くはありません。

font-weight:500

「WindowsのChromeで、游ゴシックのfont-weight:400(normal)時、文字が細すぎる」問題の解決策です。

font-weight:500を指定してnormalより少し太いフォントを利用しています。

※太字の場合は、font-weight:700を指定する
※「@font-faceで解決する」方法は、Chrome62+で動作しないため、不採用
 その後、修正されています(利用できます)
※「Mediumフォントを指定する」方法は、太字の際に文字が滲むため、不採用
 (太字を使用するわけではなく、標準サイズを太くするため、文字が滲む)
 游ゴシックのfont-family指定方法2018年度版!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証 | WEMO


他フォントへの影響
font-weight:500対応は、新しくウエイトが多い他フォントで問題が発生します。「ヒラギノ角ゴシック」「Segoe UI」「Noto Sans」などでフォントが少し太くなってしまうため、見た目に違和感がでてきます。

@media screen\0

「IEで、游ゴシックのテキスト下部に余白ができる」問題の解決策です。

IEのみのCSSハックを利用してIEのフォント指定を別に行っています。游ゴシックは、上記問題で使えないため、メイリオを指定しています。

※「@media all and (-ms-high-contrast:none)」のCSSハックはEdgeの出現で機能しないため、不採用
 -ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
 IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB

Android

Androidの和文フォントは、複雑ですがシステムで常に1しか設定できないため、Web ページ側から違う日本語フォントを呼び出すことはできません。そのため、特別記載は不要です。

Android における最適なフォント環境を考えてみる – ミルログ
※CJK統合漢字は、有効なため、<html lang="ja">を指定しておく
 Androidデバイス上のウェブブラウザに向けたフォント設定を考える。 - freefielder.jp

その他のOS

Androidと同様にシステム同梱の標準フォントを使用する。理由としては、「情報も少なく決め打ちできないため」または、「Windowsのように標準のフォントより綺麗なフォントを別に保持しているとは考えにくいため」です。なので、逆に標準以外のフォントが間違ってヒットしないように余計な記述を追記しません。

※GUIのLinux, iOS/Android以外の携帯

ウエイトが多いフォント

「-apple-system」「BlinkMacSystemFont」「Hiragino Sans」「Segoe UI」「Noto Sans」などのウエイトが多いフォントは、他のウエイトが少ないフォントと組み合わせて使用するとウエイトの差がでてしまいます。そのため、ウエイトが多いフォントは、ウエイトが多いフォントどうしで組み合わせて使用した方が良いです。

引用符で囲まれた文字列

フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。なので、フォント名に区切りや数字がある場合、引用符で囲まなくてはなりません。

※識別子の場合、スペース区切りがあっても引用符で囲まなくても良いです
 例:「Hiragino Kaku Gothic ProN」
 font-familyで指定できるフォント名一覧
※補足:安全のため、「Hiragino Kaku Gothic ProN」は、引用符で括ることとしました

英語表記と日本語表記

ブラウザ毎の挙動の揺れの保険が必要ならば、英語・日本語表記を併記します。英語しか理解できない環境を考慮して、英語表記を先に記載します。ただ今回は、見送っています。

※日本語フォント名をエンコードすると良い?
 (有名サイトは、エンコードしてるところもあるっぽい…)
 有名サイトのfont-familyを調べてみた

英字フォントと日本語フォントの別指定

日本語フォントの英字は、日本語フォント用の領域幅で作成されているため、文字が大きく見た目で劣ります。そのため、英字フォントを別に指定(前方に定義)することで、英字と日本語のフォントを分けています。

Emoji

絵文字を使用する予定があるのならば、有効にしてください。(ユーザ入力が可能な環境など?)

htmlとbody

どちらに記載しても問題ないです。ただし、htmlのfont-sizeは、ルート扱いになるため、ハック目的で利用されることがあります。なので、通常の利用目的で使用されるfont-sizeなどと合わせて使用するため、bodyで記載しています。

button, input, select, textarea

font-familyは、継承される属性です。ですがinputなどの要素は、ブラウザ側で初期設定がされておりfont-familyを継承が断ち切れます。なので、個別にfont-familyを指定しています。

アップルUI

「-apple-system」「BlinkMacSystemFont」です。
アップル製品は、元々フォントが綺麗なため、システム設定から変更せずにそのまま使用しています。

「-apple-system」は、Safari/Firefox用です。「BlinkMacSystemFont」は、Chrome/Opera用です。今回は使用していませんが、「.SFNSDisplay-Regular」は、記号用です。

※一部記号が San Francisco で描画されない
 Web ページでも San Francisco が使いたい! - Glósóli
※iOS11以降は、「-apple-system」で和文も対象となります
 ios11以前と以降での、-apple-systemの表示 - Qiita
※Firefoxは、(Safariを模倣した?ため、)非標準であるが「-apple-system」を使用できる

iOS11以降の「-apple-system」全角文字

「-apple-system」は、iOS11以降で和文フォントとして「ヒラギノ」を使用します。このヒラギノは通常のヒラギノではありません。通常のヒラギノより「グリフ高さが1px小さい」ヒラギノになります。これは、「San Francisco」のアルファベットと高さを揃えるための対応だと思われます。これにより、全角と半角で高さが揃いより違和感のない表示となっています。

ios11以前と以降での、-apple-systemの表示 - Qiita

Helvetica Neue

上記以外のアップル製品用です。

※Helveticaの名称は、「Helvetica」ですがItalicフォントが存在しないため、Italicフォントが存在する「"Helvetica Neue"」を採用しています
※Windows版の名称は、「HelveticaNeue」ですが他Windowsと統一のため、不採用です
 (「HelveticaNeue」は、Windowsに標準では搭載されていません)

Verdana

WindowsVistaから搭載された英字フォントです。マイクロソフトがコンピュータ用ディスプレイ上での視認性向上のために開発したフォントです。メイリオのベースとなったフォントでもあります。

※Arialと比べて文字幅が広いため、レイアウトが崩れる原因になります
 (想定外のフォントが適用されることを考慮すると、この程度でレイアウトが崩れていては不味いという考え方もあります)

Segoe UI

英語版のWindowsVista・Windows7で、デフォルトのシステムフォントです。

フォントの選び方
※「U+2546のグリフが、U+2545と同じになっているバグがある」
 引用:Segoe - Wikipedia
 まず使用しないため、意識する必要はないです
 例:U+2545=「╅」、U+2546=「╆」

Arial

Windows初期からの英字フォントです。Helveticaの派生フォントであり、表示統一の観点から採用しています。

※Windowsでは、「Helvetica」をインストールしていない状態で「Helvetica」が指定された場合、エイリアスフォントとして「Arial」を使用する仕様となっています

Roboto

Android 4.1以降搭載の英字フォントです。

※無指定でも使用されると思われるため、不採用でもよい

ヒラギノ角ゴ Pro

macOS10.5以降及びiOSの日本語フォントです。

※macOSとiOSで英語の名称が異なる(日本語の名称は同じ)
 'Hiragino Kaku Gothic ProN', 'HiraKakuProN-W3'

ヒラギノ角ゴシック (Hiragino Sans)

macOS10.11以降及の日本語フォントです。「ヒラギノ角ゴ Pro」が存在しない環境用です。

※macOS Catalina(10.16)で「ヒラギノ角ゴ Pro W3」が使えなくなる問題の対応
 Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ - かもメモ
※ヒラギノ角ゴシックは、W0~W9まで準備されているため、Windowsの游ゴシック問題(font-weight:500)と衝突します(400と500の差をどこまで気にするかの問題です)

BIZ UDゴシック

デジタルフォントの代表的メーカーであるモリサワがビジネス文書向けに開発したフォントです。「UD デジタル 教科書体」を太くして、丸ゴシックにしたようなフォントです。

※「UD デジタル 教科書体」の線が細くなる問題の解決策になりそうです
※非プロポーショナルフォントを指定している理由は、プロポーショナルフォントを利用してしまうと、「」『』()などの幅が極端に狭まってしまうため、他の「游ゴシック」「Meiryo」と表示がことなってしまうためです

UD デジタル 教科書体

デジタルフォントの代表的メーカーであるモリサワがデジタル教科書向けに開発したフォントです。教科書体のため、一般的なゴシック体や明朝体ではありません。明朝体よりのより手書きのような書体になります。

※(教科書体のため)線が細くなる点を考慮する必要があります
 (手書き風の教科書体とゴシック体を同一フォントサイズで比較すると必然的に細くなります)
※Web標準がゴシック体のため、他サイトとの兼ね合いから今回は不採用とする
ブロブに最適なフォントは游ゴシック?それともメイリオ?明朝体はどうして使われないの? | いくら図書館のきまりでもね
※非プロポーショナルフォント(全角文字のみ)の理由は、「BIZ UDゴシック」と同様です

游ゴシック

MacとWindows共通で利用できる珍しいフォントです。ただし、前述の通りWindows側に大きな問題を抱えています。ですが、表示統一を考えると一番有力なフォントです。

※MacとWindowsでCSSの指定方法が異なる
 Mac:YuGothic, "游ゴシック体"
 Win:"Yu Gothic", "游ゴシック"
※一定数アンチ「游ゴシック」派がいる

Osaka

Classic Mac OSで採用されていたフォントです。macOSには、標準では搭載されておらず、追加ダウンロードが必要となります。

※Classic Mac OSの最終リリースが8年以上前のため、不採用

メイリオ

WindowsVista以降採用のフォントです。

※WindowsVistaより前を考慮したくないため、これ以上追求しない
 WindowsXPなら「MS ゴシック」かな?、「sans-serif」でいいのでは…

system-ui

OS標準のフォントです。CSS4の仕様です。現在は、Chrome56+/Opera43+でしか実装されておらず現状使用するのはためらわれます。また、WindowsのUIフォントは、文字の間隔を「詰めるだけ詰める」方針で設計されているため、見栄えがよくありません。他のOSも同じ設計方針だとすれば、採用はためらわれます。

日本語向けフォントスタックの現状 - yuhei blog
 Apple製デバイスにおけるCSSのフォント指定を理解する - blog.takemaro.com
 意外と知らないメイリオUI・Yu Gothic UI。UIフォントとはなんなのか - ジブンライフ

sans-serif

ブラウザmacOSWindows10Windows8.1
Chromeヒラギノ角ゴ ProNメイリオMS Pゴシック
SafariHelvetica, ヒラギノ角ゴ ProN--
Firefoxヒラギノ角ゴ ProNメイリオMS Pゴシック
Edge-Arial, メイリオ-
IE11-Arial, メイリオメイリオ

ブラウザのデフォルトフォント / もうパンツはかない
 ブラウザのデフォルトフォント / もうパンツはかない
 各種ブラウザ デフォルト フォント 一覧 - Windows & IT Tips
 Webブラウザのデフォルトのフォント

結論:Windows8.1がお亡くなりになる(2023年1月10日)まで「游ゴシック」なし時は、「メイリオ」を外せない
補足:macOS Catalinaで「ヒラギノ明朝」を表示する問題があったため、sans-serifに頼るのもちょっと怖い
補足:GoogleのWebサイトがなぜか「arial」指定してる理由はたぶんこれじゃないかな?
   ChromeのmacOS・Windowsで「arial」指定しないと日本語フォントの英字を使用するため

Emoji

絵文字を表示するためフォントです。Emojiを利用する予定がないため、ほとんど調べていません。Bootstrapを参考にしました。順番だけ変更しています。(「Segoe UI」が2つある理由などいろいろよくわかっていません)

Reboot · Bootstrap

参考

関連

  1. font-familyを調べまわった結果のまとめ
  2. font-familyのソースコード用等幅フォント設定まとめ
  3. 有名サイトのfont-familyを調べてみた
  4. ブログのfont-family決定版