ブログのfont-family決定版

はじめに

ブログのfont-family決定版です。下記の長い長い調査結果を踏まえた最終案です。

※ブログの設定変更時に加筆修正予定です
　最終更新日：2021年01月21日（CSS変更を含む）

結果

表示サンプル

筆者環境では、上記のように「Verdana」「BIZ UDゴシック」が適用されています。

通常フォント

font-familybody {
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, Verdana, arial, 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDGothic', Meiryo, sans-serif;
                        /* San Francisco, ヒラギノ (macOS10.11+, iOS9+) */
                        /* Helvetica, ヒラギノ (macOS10.0+?, iOS4+?) */
                        /* Verdana, BIZ UDゴシック (Windows10 October 2018 Update+) */
                        /* Verdana, Meiryo (WindowsVista+) */
                        /* sans-serif (etc) */
  line-height: 1.125;   /* 1.125 * 16px(想定フォントサイズ) = 18px */
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.125;
}
article {
  line-height: 1.75;    /* 1.75 * 16px(想定フォントサイズ) = 28px */
}

概要

アップルUI > Verdana > Arial > ヒラギノ > BIZ UDゴシック > メイリオ
Mac系：アップルUI or Arial, ヒラギノ
Win系：Verdana or Arial, BIZ UDゴシック or メイリオ
その他：sans-serif

決定理由

  • macOSは、アップルUIを採用する
    • 理由：アップル製品は、アップル標準を使用する基本方針のため
  • Windowsは、「Verdana」「BIZ UDゴシック」を採用する
    • 理由：Windows標準のなかで一番読みやすいため
  • 英字の保険として、「Arial」を採用する
    • 理由：macOS, Windowsともにインストールされており、読みやすいため
  • 和文の保険として、macOSは「ヒラギノ」、Windowsは「メイリオ」を採用する
    • 理由：ヒラギノは同上、メイリオは游ゴシック問題回避のため
  • Windows8.1がお亡くなりになる（2023年1月10日）まで「メイリオ」は必要（覚書）
    • Windows8.1のChrome, Firefoxで「sans-serif」は、「ＭＳ Ｐゴシック」である
  • Android（その他OS含む）は、未指定とする
    • 理由は、標準をそのまま使用すればよいと考えたため

※メインコンテンツ内の外観用文字に要注意
※line-heightは、一般的に150～200%が読みやすいとされている
※外観とメインコンテンツでフォントを分ける案は、却下しました
　理由としては、「BIZ UDゴシック」を気に入っていることと、CSSを減らすため

通常フォントの別フォント順案（覚書）

[読みやすさ重視]
アップルUI > Verdana(or Segoe UI) > ヒラギノ > BIZ UDゴシック
Mac系：アップルUI, ヒラギノ
Win系：Verdana(or Segoe UI), BIZ UDゴシック

[Arial・游ゴシック統一]
Arial > 游ゴシック

[日本語のみ統一]
アップルUI > Segoe UI > 游ゴシック
※-apple-system の和文対応でいろいろ難しい

[游ゴシック統一]
游ゴシック

[ヒラギノ・游ゴシック]
アップルUI > Segoe UI > ヒラギノ > 游ゴシック
Mac系：アップルUI, ヒラギノ
Win系：Segoe UI, 游ゴシック

[ヒラギノ・メイリオ]
アップルUI > Segoe UI > ヒラギノ > メイリオ
Mac系：アップルUI, ヒラギノ
Win系：Segoe UI, メイリオ
※游ゴシックの不具合対応が不要になる

[システムUI]
system-ui > sans-serif
※ブラウザがまだ未対応のため、実現不可

[WebFont]
WebFont > sans-serif
※読み込み中の表示について要検討

[ブラウザ標準]
sans-serif

等幅フォント

font-family(mono)code, pre {
  font-family: SFMono-Regular, Consolas, 'Courier New', 'BIZ UDGothic', Meiryo, monospace;
                        /* SFMono, monospace (macOS10.11+, iOS9+) */
                        /* Consolas, BIZ UDゴシック (Windows10 October 2018 Update+) */
                        /* Consolas, Meiryo (WindowsVista+) */
                        /* Courier New, monospace (macOS10.3+?, iOS4+, WindowsXP+?) */
                        /* monospace (etc) */
}

概要

SFMono > Consolas > Courier New > Windows和文 > monospace
Mac系：SFMono or monospace
Win系：Consolas or Windows和文
その他：monospace

決定理由

  • 和英混在の場合、等幅に見せるよう調整しない基本方針とする
  • macOS/iOS英字は、「SFMono」を採用する
    • 理由：アップル製品は、アップル標準を使用する基本方針のため
  • Windows英字は、「Consolas」を採用する
  • 英字の保険として「Courier New」を採用する
    • 理由：上に同じ
  • macOS和文は、「Osaka-等幅」「ヒラギノ角ゴ ProN」のブラウザ標準とする
  • Windows和文は、「BIZ UDゴシック」「Meiryo」の通常フォント同様とする
  • プログラミングフォントは使用しない
    • 理由は、「Consolas」で十分と考えたため
  • Android（その他OS含む）は、未指定とする
    • 理由は、標準をそのまま使用すればよいと考えたため

等幅フォントの別フォント順案（覚書）

[プログラミングフォント狙い]
プログラミングフォント > SFMono > Consolas > Windows和文 > monospace

[SFMono・Consolas]
SFMono > Consolas > Windows和文 > monospace
Mac系：SFMono, monospace
Win系：Consolas, Windows和文

[Courier New統一]
Courier New > Windows和文 > monospace

[英和混合で揃える]
Osaka-等幅 > ＭＳ ゴシック > monospace
Mac系：Osaka-等幅（標準搭載ではない） or monospace（場合によっては揃わない？）
Win系：ＭＳ ゴシック（和文をMeiryo指定される可能性がるため、明示指定する）

[ブラウザ標準]
monospace
※要単独指定時のフォントサイズ問題への対応

その他（覚書）

マーケットシェア

標準搭載フォント（Windows）

標準搭載フォント（macOS）

標準搭載フォント（iOS）

フォント一覧

関連

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