2010年代前半、プログラミング用の等幅フォントというと VLゴシック か Ricty くらいしか見当たりませんでした。いずれも半角の幅が全角の幅の半分であったため「等幅フォント」を選べば間違いありませんでした。しかし近年は日本語（漢字やカナ）を含むさまざまなプログラミングフォントが登場し、フォントの選択によっては空白文字やタブ文字で揃えた列の位置がずれる現象を引き起こすことがあるため、原因と対策をまとめました。
1. 等幅フォントとプロポーショナルフォント
フォントは大きく分けて『等幅フォント（固定幅フォント）』と『プロポーショナルフォント（可変幅フォント）』の２種類が存在します。
1.1. プロポーショナルフォント（MS Pゴシック）の例
上記の表示例では同じ５文字でも１行目と２行目と３行目で行末の列位置が異なっています。アルファベットであれば、どの文字も幅が全て同じというわけでは必ずしもありません。たとえば i と m のフォント幅は往々にして異なります。
1.2. 等幅フォント（MS ゴシック）の例
等幅フォントはフォントの幅が全て同じになるようデザインしているため列幅がずれることはありません。
2. 半角と全角の幅の比
そこで、等幅フォントを選択すれば全てが解決しそうですが、残念ながら必ずしも上手くはいきません。
2.1. Source Han Code JP
"Source Han Code JP" は、Adobe社が Open Font License (OFL) で開発した "Source Code Pro" と "Source Han Sans JP（源ノ角ゴシック）" を組み合わてつくられたプログラミング用の『等幅』フォントです。
一見、アルファベットと漢字の列位置が揃っているように見えますが、上下に線を引くとレガシーな日本語テキストエディタとの表示レイアウトの違いが見えてきます。
"Source Han Code JP" は半角文字と全角文字の幅の比が 2 : 3 でデザインされています。このため「半角の幅」は「全角の幅の半分」であることを期待するレガシーな日本語環境と表示レイアウトに相違が生じます。
半角スペースを使い列位置を調整すると一見揃ったようには見えます。しかし複数のフォント（例えば Consolas と MSゴシック）を混ぜて表示させると半角と全角の幅の比は往々にして割り切れない数字になります。そして、各フォント固有の幅で列位置を揃えたテキストファイルを半角と全角の幅の比を 1 : 2 で表示するレガシーな日本語環境で表示すると崩れてしまいます。
さらにはタブ文字で列位置を揃えようと試みるとインデントが崩れてしまいます。
2.2. Ricty Diminished
そこでレガシーな日本語環境に合わせて半角と全角の幅の比を 1 : 2 に調整したプログラミング専用フォントの登場となります。
日本語独自の半角と全角の事情を考慮していない Visual Studio Code のような海外製テキストエディタでも、タブ文字で綺麗に列位置を揃えることができます。
ちなみに、MSゴシックなど日本語の等幅フォントの多くは半角と全角の比が 1 : 2 となるようにデザインされています。そこで『半角文字』も『全角文字』もMSゴシックで統一すれば列が崩れる問題は発生しません。しかしながらプログラミング用に 0 (ゼロ) や O (オー) のフォントのデザイン（グリフ）を工夫した英数フォント（たとえば Consolas）とMSゴシックを混ぜてしまうと 1 : 2 の比が崩れてしまうため上手くいきません。等幅であっても半角と全角の比がぴったり 1 : 2 になっているとは限らないからです。
以上のことから、日本語が混じったソースコードをレガシーな日本語環境に合わせたレイアウトで表示させるためには『半角文字』と『全角文字』の幅を 1 : 2 に調整したプログラミング用フォントに揃える必要があります。複数のフォント（フォントファミリー）を混在させると往々にして幅（列の位置）がずれます。
3. フォントファミリーと総称ファミリー
フォントの指定方法には "フォントファミリー名(font family name)" と "総称ファミリー名(generic family name)" の二種類があります。CSSの仕様ではフォントファミリーは引用符 ' や " で括り、総称フォントは括らないルールになっています。ただし多くのWebブラウザでは引用符で括らない記述もフォントファミリ名として認識します。
| font-family | 引用符 | フォント名の例 |
|---|---|---|
| フォントファミリー名 | 括る | "Consolas", "Courier New", "MS Gothic" |
| 総称ファミリー名 | 括らない | sans-serif, monospace |
CSSでは複数のフォントを指定することができます。複数のフォントが指定されたときは先頭から探します。
|
1 |
'Consolas', 'Courier New', monospace |
たとえば上記のようにフォントを指定すると、
- "Consolas" を探す。
- "Consolas" が見つからなければ "Courier New" を探す。
- "Courier New" が見つからなければ "monospace (等幅フォント)" の中から代替フォントを探す。
- 代替フォントの中から、たとえば "ＭＳ ゴシック" を見つける。
このフォント設定の例では、英数字（いわゆる半角）はConsolasを表示します。一方で、漢字（いわゆる全角）はＭＳ ゴシックを表示します。いずれも等幅フォントですが、幅の比が 1 : 2 ではないため微妙なズレが生じます。
4. 各種フォント
半角 : 全角 = 1 : 2 を満たすオープンなフォントの一覧
- Ricty Diminished
- 👍 Ricty Diminished ※ 2023年現在 推奨できません。合成元フォントのバージョンアップへの追従、不具合の修正が停止（終了）しています。
- UDEV Gothic
- 👍 UDEV Gothic JPDOC : 日本語文書向け
- 👎 UDEV Gothic 35 : 文字幅比率 半角3:全角5
- 👎 UDEV Gothic LG : リガチャ対応版
- Myrica
- 👍 Myrica M : 等幅フォント
- 👎 Myrica P : プロポーショナルフォント
- 👎 Myrica N : 幅を狭くしたフォント
- PlemolJP
- 👍 PlamoIJP : 文字幅比率「半角1:全角2」の通常版の PlemolJP
- 👎 PlemolJP35 : 文字幅比率「半角3:全角5」の PlemolJP
- Source Han Code JP
- 👎 Source Han Code JP
- Moralerspace
- 👎 Neon : 文字幅比率 半角3:全角5
- 👎 Argon : 文字幅比率 半角3:全角5
- 👎 Xenon : 文字幅比率 半角3:全角5
- 👎 Radon : 文字幅比率 半角3:全角5
各フォント・パッケージには「半角 : 全角 = 1 : 2」のほかに「半角 : 全角 = 3 : 5」や プロポーショナル・フォントなど複数の『フォント・ファミリー』が含まれているものがあります（同梱されているものがあります）。一方で「半角の幅が全角の幅の半分」というレガシーな日本語環境にこだわらないのであれば、2:3 や 3:5 の比を採用した等幅フォントのほうが好みに合うかもしれません。どれを選択すれば良いの？という疑問を解決するための、長々とした解説でした。