プログラミングフォントの系譜を整理して図解してみました（→PlemolJPを使うことにしました）

## はじめに

「[あの IBM が作ったオープンソース日本語フォントを使い、プログラミングフォント『PlemolJP』を作ってみた](https://qiita.com/tawara_/items/0a7b8c50a48ea86b2d91)」で紹介されている[PlemolJP][pj]が、とても良さそうだった。

これまでもブログ記事などの「おすすめ」に従って、なんとなくフォントを選ぶ人生を歩んできたので😅、一念発起して「プログラミングフォントの代表的なものの系譜」を整理してみた。

もし皆さまのフォント選択の一助となればさいわいです。

### 環境

- macOS BigSur 11.5.1
- MacBook Pro (13-inch, 2020, Four Thunderbolt 3 Ports)

> Windows環境だとヒンティング情報を気にしなければならない（らしい）

## プログラミングフォントの系譜

### 表にすると

|            | [Ricty][rc]                                                            | [Myrica][my]                       | [HackGen][hg]                                    | [PlemolJP][pj]         |
| ---------- | ---------------------------------------------------------------------- | ---------------------------------- | ------------------------------------------------ | ---------------------- |
| 英数 | [Inconsolata][in]                                                      | [Inconsolata][in]                  | [Hack][hc]                                       | [IBM Plex Mono][ib]    |
| 日本語 | [Migu 1M][mg]                                                          | [源真ゴシックL][gs]                | [源柔ゴシック][gj]                               | [IBM Plex Sans JP][ib] |
| [ウェイト](#ウェイト欄の略語)   | R/B x O                                                                | MS/NS                              | R/B                                              | T/EL/L/R/Tx/M/SB/B x I |
| [その他](#その他欄の略語) | [Discord][rc]：判読性向上<br>[Diminished][rd]：日本語が[Circle M+][cm] | [MyricaM][my]：日本語が[Mgen+][mp] | Nerd/3:5<br>[Firge][fr]：ラテンが[Fira Mono][fm] | Nerd/3:5              |

### 日本語フォントの合成

```math
Migu\:1M   = M^+ + IPAゴシック \\
Circle\: M^+ = M^+ (IPAなしで加工) \\
Mgen^+     = M^+ + 源ノ角ゴシック \\
源真ゴシック = 源ノ角ゴシック + M^+ \\
源柔ゴシック = 源真ゴシックL(控えめに丸く)
```

### 図にすると

```plantuml
!includeurl https://raw.githubusercontent.com/matthewjosephtaylor/plantuml-style/master/style.pu

top to bottom direction

' ベースとなる日本語フォントのレイヤー
rectangle "ベース日本語フォント" as basf {
  together {
    file "M+"            as mpl
    file "IPAゴシック"    as ipa
  }
  together {
    file "源ノ角ゴシック"  as gkg
    file "IBM Plex Sans" as ips
  }
}

' 合成したものレイヤー
together {
  file "Migu 1M"       as mg1
  file "Mgen+"         as mgp
  file "Circle M+"     as cmp
}
file "源真ゴシック"    as gsg
file "源柔ゴシックL"   as gjg

' プログラミングフォントのレイヤー
rectangle "プログラミングフォント" as pgmf {
  together {
    collections "Ricty (&Discord)"    as rict
    collections "Ricty Diminished" as ricd
    }
  together {
    collections "Myrica"   as myri
    collections "MyricaM"  as myrM
  }
  together {
    collections "PlemolJP" as plem
    collections "HackGen"  as hckg
  }
}

' 英文フォントレイヤー
rectangle "英文フォント" as asci {
  together {
    file "Consolas"      as cns
    file "Inconsolata"   as inc
    cns -> inc
  }
  file "hack"          as hck
  file "IBM Plex Mono" as ipm
}


' 日本語フォントから合成フォント
mpl --> mg1 :改変
ipa -[dotted]-> mg1 :補完

mpl --> mgp
gkg -[dotted]-> mgp :補完

mpl --> cmp :IPAなし加工

gkg --> gsg :TrueType化
mpl -[dotted]-> gsg :補完

gsg --> gjg :丸く（ひかえめ）

' プログラミングフォント

mg1 --> rict
cmp --> ricd
gsg --> myri
mgp --> myrM
ips --> plem
gjg --> hckg

inc -u---> rict
inc -u---> ricd
inc -u---> myri
inc -u---> myrM
hck -u---> hckg

ipm -u-> plem

'' 並びの指定
' 日本語フォントの並び

' 合成フォントの並び
mgp -[hidden]r-> gsg

' プログラミングフォントの並び

```

### スクリーンショット

Ricty
<img src="https://i.gyazo.com/cde8de541702ed67e0a0bb45271e1480.png" width=30%>

Ricty Discord
<img src="https://i.gyazo.com/6e99c186c6779c15033b4298c86eec64.png" width=30%>

MyricaM M
<img src="https://i.gyazo.com/522f007be68a23d18c5388d7d5105a16.png" width=30%>

白源 通常版
<img src="https://i.gyazo.com/773e0c6e1ef103dbac468e6971825a18.png" width=30%> <img src="https://raw.githubusercontent.com/yuru7/HackGen/image/sc_hackgen.png" width=30%>

PlemolJP Regular
<img src="https://i.gyazo.com/2504e9e7d03678cd6e08cfb375aad6d0.png" width=30%> <img src="https://user-images.githubusercontent.com/13458509/127089028-5329a5d8-aacf-4398-aa9b-b92fbb7d7e35.png" width=30%>
PlemolJP Light
<img src="https://i.gyazo.com/fc2f458aa95cba0bedd1d4d3046a995d.png" width=30%>

## プログラミングフォントの選択

（わたしの場合です）

### 条件

- ガチなコードはそれほど書かない
    - 書く場合も、エディタ指定フォントを使っている（Xcode / Google Apps Scriptエディタなど）
- Markdownで書く比率が高い
    - 日本語とコード（英数字）が混在
    - スライドや図表もテキストで書くことが多い（Marp / PlantUML / Mermaidなど）
- エディタは種々利用
    - 主にObsidian / VS Code
    - たまにCotEditor / Vim

### 経緯

Ricty → Ricty Discord （→ 源ノ角ゴシック Code JP） → MyricaM　と「進められるままに、良さそげなフォント」を選択してきた。ここしばらく（1年ぐらい）は、わりとMyricaMを気に入って使っていた。

### 選択

PlemolJP Lightを使うことにした。

<img src="https://i.gyazo.com/87558fb92ef0b1733309609d8eaa9ce8.png" width=80%>


- M+系が好きみたい
    - 源ノ角系は、印刷するのには好きだが、どうやらスクリーンで見るのがそれほど好きじゃないみたい

- ウェイトが軽いのが好きみたい
    - 日本語の比率が多めだからとおもうが、ウェイトが軽いほうが「圧迫感」がなくて好きみたい
    - Ricty(Discord)は大好きだが、日本語がちょっと重たいんだなあ（個人の感想です）

> 印刷する前提のときは、macOSだと、ついヒラギノ系を選んでしまう……
> Windowsでは、源ノ角系を選びたいが、ファイルを渡して相手が印刷できないと困るので、ついメイリオを選んでしまう……


## 謝辞

本記事に登場する、あるいは登場しない、英文プログラマーフォントならびに日本語プログラミングフォントを提供してくださっている作者の皆さまに心より感謝申し上げます。

まいにち長時間にわたって目にしているフォントに、とてもすばらしい選択肢があって、ほんとうにハッピーです。

## 参考リンク

フォントそれぞれへのリンクは、[表中に記載しました](#表にすると)

PlemolJP/白源作者様による解説
- [あの IBM が作ったオープンソース日本語フォントを使い、プログラミングフォント『PlemolJP』を作ってみた](https://qiita.com/tawara_/items/0a7b8c50a48ea86b2d91)
- [Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話](https://qiita.com/tawara_/items/374f3ca0a386fab8b305)

フォント選択指南
- [プログラミング用フォントの選び方とおすすめフォント](https://pouhon.net/font-programming/4990/?utm_source=pocket_mylist)　⇒　さらに多くのフォントが体系的に解説されています


[rc]: https://rictyfonts.github.io
[rd]: https://rictyfonts.github.io/diminished
[my]: https://myrica.estable.jp
[pj]: https://github.com/yuru7/PlemolJP
[hg]: https://github.com/yuru7/HackGen

[in]: https://levien.com/type/myfonts/inconsolata.html
[hc]: https://sourcefoundry.org/hack/
[gj]: http://jikasei.me/font/genjyuu/
[ib]: https://www.ibm.com/plex/concept/
[mg]: http://mix-mplus-ipa.osdn.jp/migu/
[gs]: http://jikasei.me/font/genshin/
[mp]: http://jikasei.me/font/mgenplus/
[fm]: https://fonts.google.com/specimen/Fira+Mono
[m+]: https://mplusfonts.github.io
[cm]: http://mix-mplus-ipa.osdn.jp/mplus/
[ip]: https://moji.or.jp/ipafont/
[gk]: https://github.com/adobe-fonts/source-han-sans/blob/master/README-JP.md
[nf]: https://www.nerdfonts.com
[fr]: https://github.com/yuru7/Firge

## 補足

### ウェイト欄の略語

R: レギュラー
B: ボールド
O: オブリーク（単に斜めにしたもの）
MS: モノスペース（等幅）
NS: ナロースペース（狭い）
T: シン
EL: エクストラライト
L: ライト
Tx：　テキスト
M: ミディアム
SB: セミボールド
B: ボールド
I: イタリック

### その他欄の略語

Nerd → [Nerd Fonts][nf] 対応版
3:5 → 半角：全角比が（1:2ではなく）3:5。英数字の幅が広く読みやすい（日本語との幅は揃わない）。
HS → 全角スペース不可視（Hidden Space）