-->

ブログの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は「メイリオ」を採用する
    • 理由:ヒラギノは同上、メイリオは游ゴシック問題回避のため
  • ただし、一般日本語フォントがある場合、これを優先する
    • 理由:一般日本語フォントをわざわざインストールしているのならば、そのフォントが標準より好きである可能性が高いと判断したため
    • 補足:Noto, 源ノ角は、font-weight:400でも太く他フォントとのバランスが悪いため、英字でも利用する
  • 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

※個人的な第一候補は、読みやすさ重視
※個人的な第二候補は、ヒラギノ・メイリオ
※個人的な第三候補は、Arial・游ゴシック統一

等幅フォント

font-family(mono)code, pre {
/*font-size: 14px;*/
/*line-height: 16px;*/  /* 16px = 1px + 14px(想定フォントサイズ) + 1px */
  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, PFont or monospace
Win系:Consolas, PFont or Windows和文
その他:Roboto Mono or monospace

決定理由

  • 和英混在の場合、等幅に見せるよう調整しない基本方針とする
  • macOS/iOS英字は、「SFMono」を採用する
    • 理由:アップル製品は、アップル標準を使用する基本方針のため
  • Windows英字は、「Consolas」を採用する
     + 理由:Courier、Courier New、Consolas―terkel.jp
  • Android英字は、「Roboto Mono」を採用する
  • 英字の保険として「Courier New」を採用する
    • 理由:上に同じ
  • macOS和文は、「Migu 1M」「Osaka-等幅」「ヒラギノ角ゴ ProN」のブラウザ標準とする
  • Windows和文は、「BIZ UDゴシック」「Meiryo」の通常フォント同様とする
  • ただし、プログラミング用フォントがある場合、それを優先する
  • プログラミング用フォントは、全部記載しようとするとあまりに多すぎまた間違いなく漏れるため、同志のみフォントを適用する
    • 自分の使用フォントのみ設定する
    • 上記の言い分に反して「Noto」と「源ノ角」は、大手のフォントのため、入れる
    • プログラミングフォントの使用をやめる
      • 理由は、「Consolas」で十分と考えたため

※「Noto」「源ノ角」は、他と比べ太いため、英字・日本語・等幅で揃えて使用する
※「Noto」「源ノ角」が太すぎるため、preブロック内での使用はやめる
 ただし、code内は他のインライン文字との兼ね合いで使用する
 (太さが気になるならば、「Noto」「源ノ角」の使用をやめたほうが良いかも)

等幅フォントの別フォント順案

フォント順案の覚書です。

[プログラミングフォント狙い]
プログラミングフォント > 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決定版

コメント