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

2020/02/042021/12/02

はじめに

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

ブログのfont-family決定版

暫定案（もしくは、ただの全部載せ）

font-familybody, button, input, optgroup, 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+, Windows95+?) */
    Roboto,                             /* Android英字 (Android 4.0+) */
    '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', 'Noto Sans CJK JP',            /* 和文 */
    'Source Han Sans', '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, optgroup, 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-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 ハックに使ってはいけない、ただひとつの理由
　 IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB

ウエイトが多いフォント

「-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で記載しています。

※html要素のfont-sizeは、remの基準値になります

button, input, optgroup, select, textarea

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

※フォーム要素のfont-sizeも親要素から継承されません
※HTML フォームへのスタイル設定 | MDN

Andoroidまたは、その他のOS

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

※Linux, iOS以外の携帯

OSに関する補足

Android

Androidの標準フォントは次の通りです。

Android3.x-: Droid Sans（英字）
Android3.x-: Droid Sans Japanese（和文）
Android4.0+: Roboto（英字）
Android4.0-5.x: モトヤマルベリ（和文）
Android4.0-5.x: モトヤシーダ（和文）
Android6.0+: Noto Sans CJK JP（和文）

※Android端末で表示できる日本語フォントは、常に1フォントです
　ウェブページから複数の日本語フォントを呼び出すことはできません
※Android端末によっては、独自日本語フォントを採用しているケースがあります
　例：XperiaのソニーモバイルUDゴシック
　例：SHARP製端末の新ゴM
※CJKフォント環境
　日本語指定（<html lang="ja">）しないと簡体字や繁体字で表示されることがある
※アルファベットの表示
　日本語を含む場合、アルファベットも日本語フォントで表示される
　次のいずれかをfont-familyに含む場合、アルファベットを英字フォントで描画する
　　Arial, Helvetica, Tahoma, Verdana
※Android7.0+から言語を複数選択できます
　端末で英語を使用している場合でも、日本語フォントを表示できます
※Webサイト制作に欠かせない標準フォントの知識とは？（スマホサイト編）
※Android における最適なフォント環境を考えてみる – ミルログ

アップル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」を使用する仕様となっています
※Arial font family - Typography | Microsoft Docs

Roboto

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

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

ヒラギノ角ゴ 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

ブラウザ	macOS	Windows10	Windows8.1
Chrome	ヒラギノ角ゴ ProN	メイリオ	ＭＳＰゴシック
Safari	Helvetica, ヒラギノ角ゴ ProN	-	-
Firefox	ヒラギノ角ゴ ProN	メイリオ	ＭＳＰゴシック
Edge	-	Arial, メイリオ	-
IE11	-	Arial, メイリオ	メイリオ

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

補足：Windows8.1サポート終了（2023年1月10日）まで「ＭＳＰゴシック」対策が必要
補足：Chromeで「arial」指定しないと日本語フォントの英字を使用する
　　　Googleのウェブサイトがなぜか「arial」指定してる理由はこれじゃないかな？

Emoji

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

※Reboot · Bootstrap

未指定

※font-family未指定時にiOS6+で明朝体のフォントが表示される
　回避策：sans-serifを指定する

バグ取りの日々