font-familyのソースコード用等幅フォント設定まとめ

投稿日 2020/02/05 更新日 2021/01/13

はじめに

ソースコードを表示することを考慮した等幅フォント用のfont-familyを選定します。なお、決定版は、下記のリンク先です。次に示す残提案は当ブログでは、使用していません。

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

font-family(mono)pre, code, kbd, samp, var {
  font-family:
    'Noto Sans Mono CJK JP Regular',    /* Noto */
    'Source Han Code JP N',             /* 源ノ角 */

    'Ricty',                            /* Inconsolata, Migu 1M */
    'Ricty Diminished',                 /* Inconsolata, Circle M+ 1m */
    'Ricty Diminished Discord',         /* Inconsolata, Circle M+ 1m */
    'Myrica M',                         /* Inconsolata, 源真ゴシック or Mgen+ */
    'MyricaM M',                        /* Inconsolata, Mgen+ */
    'Rounded M+ 1m regular',            /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Rounded M+ 2m regular',            /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Rounded Mgen+ 1m regular',         /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Rounded Mgen+ 2m regular',         /* M+ OUTLINE FONTS, 源ノ角ゴシック */
    'Migu 1M',                          /* M+, IPAゴシック */
    'Migu 2M',                          /* M+, IPAゴシック */
    'VL ゴシック',                      /* M+ OUTLINE FONTS */
    'M+ 1m',                            /* M+ */
    'M+ 2m',                            /* M+ */
    'Yutapon coding Regular',           /* Yutapon */

    SFMono-Regular,                     /* SF Mono, Migu 1M (macOS10.12+) */
    Consolas,                           /* 英字 (Windows7+) */
/*  Menlo,                              /* 英字 (macOS10.6+) */
/*  Monaco,                             /* 英字 (Classic Mac OS+) */
    'Roboto Mono',                      /* 英字 (Android4+) */
/*  'Liberation Mono',                  /* Arial or Times New Roman or Courier New */
    'Courier New',                      /* Courier (macOS10.3+?, iOS4+?, WindowsXP+?) */
/*  Courier,                            /* 英字 (macOS10.3+?, WindowsXP+?) */
/*  'Osaka-mono', 'Osaka-等幅',         /* 日本語 (Classic Mac OS-) [mac:monospace] */
    Meiryo, /*'メイリオ',               /* 日本語 (WindowsVista+) */
/*  'MS Gothic', 'ＭＳ ゴシック'        /* 日本語 (Windows3.1+) [win:monospace] */
    monospace;
}

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

コードの補足

pre, code, kbd, samp, var

  • <pre>: 整形済みテキスト、ソースコード
  • <code>: プログラムコードの断片
  • <kbd>: キーボード入力
  • <samp>: サンプル出力
  • <var>: 変数
  • <tt>: テレタイプテキスト（廃止）

font-size

標準のフォントサイズは、16pxとされています。ですが、等幅フォントのそれより少し小さいサイズ（14px程度）を使用するのが一般的です。

和英混在の等幅、英字のみ等幅

等幅フォントを使用する主目的は、和英混在を等幅に表示することです。ですが、英字のみ等幅にする考え方もあります。

プログラミングフォント

閲覧者の環境にインストールしていれば適用されます。使用するフォントのみをインストールしていると考えれば、閲覧者の使用フォントで表示できる。

※配置順は、完全に個人的趣味です。（複数指定する場合、並び替えましょう）
※プログラミングフォントならば、和英混在でも等幅で表示できます

M+

M+ FONTS（エムプラス フォンツ）は、森下浩司によってデザインされているゴシック体の日本語フォントである。アウトラインフォントの M+ OUTLINE FONTS と、ビットマップフォントの M+ BITMAP FONTS とがある。

フリーソフトウェアであり、さらに利用・改変・再配布についてほぼ制限の無いライセンスが適用されているため、このフォントをベースにカスタマイズを施した派生フォントが多数配布されている。

フリー百科事典『ウィキペディア（Wikipedia）』."M+ FONTS" (最終閲覧日: 2020年02月05日)

上記の理由により、他フォントで多く利用されています。

源ノ角ゴシック

AdobeとGoogleが共同開発しているフォントです。「Source Han Sans」がAdobeで、「Noto」がGoogleのフォントです。

※Source Han Code JPは、全角2文字で半角3文字分あるのが特徴的
※1文字の幅が他のフォントと比べて広いため、レイアウトが崩れないか注意
※文字の太さが他のフォントと比べて太いため、他フォントとの組み合わせは注意

SFMono

「San Francisco」の等幅フォントです。

Consolas

Windows7以降に搭載された英字フォントです。

Menlo

macOS10.6以降搭載のフォントです。

Monaco

macOSに同梱されているフォントです。

Roboto Mono

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

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

Liberation Mono

「Arial」「Times New Roman」「Courier New」とのフリーな互換フォントです。

Courier, Courier New

「Courier」は、タイプライター用に設計されたフォントです。「Courier New」は、「Courier」を元にしてデジタル環境用に設計されたフォントです。

※Courier、Courier New、Consolas―terkel.jp

メイリオ

WindowsVista以降採用のフォントです。等幅フォントではありません。

※標準ではありませんが、メイリオを等幅にしたフォントも存在します
　MeiryoKe

monospace

ブラウザmacOSWindows10Windows8.1
Chrome
Osaka-等幅
ＭＳ ゴシック
ＭＳ ゴシック
SafariCourier
ヒラギノ角ゴ ProN		--
Firefox
Osaka-等幅
ＭＳ ゴシック
ＭＳ ゴシック
Edge-Consolas
ＭＳ ゴシック		-
IE11-Courier New
ＭＳ ゴシック		Courier New
ＭＳ ゴシック

※ブラウザのデフォルトフォント / もうパンツはかない
　ブラウザのデフォルトフォント / もうパンツはかない
　各種ブラウザ デフォルト フォント 一覧　-　Windows ＆ IT Tips
　Webブラウザのデフォルトのフォント
※macOS（Mac OS X）は、Osakaは標準搭載されていない。だが、moanospace指定に限り「Osaka-等幅」が使用される
※macOSは「ヒラギノ」「Osaka」が適用される
※Windowsは「ＭＳ ゴシック」が適用される
　ただし、特定条件（詳細条件不明）を満たすと「Meiryo」になる
　例：<html lang="en">
　補足：「Meiryo」は、等幅フォントではありません

font-family: monospace, monospace;

font-familyにmonospaceを単独で指定した場合、ブラウザが勝手にフォントサイズを小さくする問題があります。これを回避するために、font-familyにmonospaceを単独で指定したい場合、にmonospaceを2つ重ねて記載することでこの問題を回避できるハック手法が存在します。

※Issue #519 · necolas/normalize.css

参考

関連

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

コメント