ブログのfont-family決定版

はじめに

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

※ブログの設定変更時に加筆修正予定です
 最終更新日:2020年02月19日(CSS変更を含む)

結果

表示サンプル

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

通常フォント

font-familybody, button, input, select, textarea {
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, Verdana, Roboto, 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+) */
                        /* Robot (Android4.1+) */
  line-height: 1.125;   /* 1.125 * 16px(想定フォントサイズ) = 18px */
}
article {
  line-height: 1.5;     /* 1.5 * 16px(想定フォントサイズ) = 24px */
}

概要

アップル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」は、「MS Pゴシック」である

※メインコンテンツ内の外観用文字に要注意
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, 'Roboto Mono', 'Courier New', 'BIZ UDGothic', Meiryo, monospace;
                        /* SFMono, monospace (macOS10.11+, iOS9+) */
                        /* Consolas, BIZ UDゴシック (Windows10 October 2018 Update+) */
                        /* Consolas, Meiryo (Windows7+) */
                        /* Courier New, monospace (macOS10.3+?, iOS4+, WindowsXP+?) */
                        /* Robot Mono, monospace (Android4+) */
}

概要

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

決定理由

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

等幅フォントの別フォント順案(覚書)

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

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

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

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

[ブラウザ標準]
monospace

関連

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

コメント