こだわりのプログラミング用フォントを求めて

TL;DR

Iosevka,'Migu 1M' または 更紗ゴシック

プログラミングではフォントにこだわるべき

プログラミングにおいて重要な物の一つがどのフォントを使うかです。小さなこだわりではありますが、作業効率の向上、バグの防止、プロっぽく見える、といった多くの利点があります。特にプログラミング用フォントと言われるものは、プログラミングのしやすさを追求したものであり、それらを使うか使わないかで大きく異なると思います。

プログラミング用フォントと言っても、実に多くのフォントが存在します。いろいろなフォントを検討していった結果、私はようやく満足のいくフォント設定に辿り尽きました。

プログラミング用フォントに求められる要件

私が求める要件であり、他の人にはそこまでこだわらないものもあるかも知れません。

• 等幅フォント
  • 英字の幅が半角で固定¹
  • 通常の平仮名・片仮名・漢字の幅が全角で固定
  • その他は文字種によって半角または全角で固定
• 日本語を含む多様な文字種をサポート
  • ASCII
  • ラテン補助・ラテン拡張A-B
  • ギリシャ文字及びコプト文字・キリール文字
  • 制御機能用記号(U+2400-U+2426)²
  • 平仮名・片仮名
  • 漢字
    • 第一水準・第二水準・第三水準・第四水準
  • 日本特有の記号(㈱とか)
  • その他、Windows-31J(CP932)に含まれる全ての文字
• プログラミング用合字(ligature)対応
  • >=が≧、!=が≠のように表記される機能
• TrueTypeまたはOpenType
• 大きさは14pxと16pxで見れれば十分
  • なるべく小さくても可読性が落ちない方が良い
  • 大きくてもカクカクしない方が良い
• 区別しにくい文字が区別できる
  • 0O
  • 1Il|
  • カ力、エ工、ロ口、ー一、ニ二、へヘ
  • 〜～
• こだわりの文字種
  • aとかgの形はこだわりたい
  • 中国および韓国の漢字にならない事(「海」とかが異なる)
• どこでも利用可能
  • 無償で利用できる
  • ネット上で配付されている
  • TTF、OTF、TTC、OTCで配付されている
  • Windows、Mac、Linuxで利用できる
  • ツールを使って作成するなどの手間が不要

要件を満たすフォント

結論から言うと**更紗ゴシック以外にありません**。ほとんどの要件を満たすフォントはあるのですが、プログラミング用合字に対応したプログラミング用和文フォントが更紗ゴシック以外に探し出せませんでした。³

しかし、更紗ゴシックも完全とは言えません。和文フォントはSource Han Sansをそのまま採用しているため、区別しにくい文字(〜～等)はそのままです。aやgに拘りがある場合は、選択することも出来ません。

最初は、Fira Codeを参考に自分で作ると言うことも考えました。しかし、単にくっつけるだけでも大変なのに、合字を組み込むとなると、フォントに詳しい知識がそれなりに無いと難しく、断念していました。

全てを満たす物が無いなら、組み合わせれば良い

さて、話は代わりますが、CSSのfont-familyを知っていますか？font-familyでは複数のフォントを指定することができ、ブラウザの環境にフォントが存在しない場合、および、フォントが存在してもそのフォントに対応する文字のグリフがない場合、次のフォントを試していくという仕組みになっています。Webページでは閲覧者の環境にどのようなフォントが含まれているかはわからないため、そのような仕組みになっているのだと思われます。

重要なのはそのフォントに対応するグリフがなければ、次のフォントを見に行くという動作です。つまり、最終的にほぼ全てのグリフを持つフォントを置けば、Tofuにはならない仕組みになっています。

そうです。お気づきの通り、これは一種のフォント合成です。スクリプトを組んでツールを走らせなくても、複数のフォントを合わせることができると言うことです。

font-familyな設定ができるエディタを使えばよい

普通のアプリーケションでは、フォントの設定ではリストが出て、ただ一つしか選べません。ですが、リストが出ずに自分でフォント名を入力するもの、しかも、その動作がfont-familyと同じになる物があります。それはElectron製のアプリケーションです。

ElectronのGUI部分はChromiumでありWebブラウザと同じ動きをします。フォントの設定もfont-familyが設定されるだけであるため、複数のフォントを指定することが可能になっています。手元で確認できたのは、Atom、Visual Studio Code、Boostnoteですが、他のアプリケーションでも同じようなことができるでしょう。(設定方法は後述)

こだわりのプログラミング用フォント(設定)はこれだ！

後は、プログラミング用合字に対応した欧文フォントとプログラミング用の和文フォントを組み合わせればいいと言うことになります。私は次の二つを選びました。

• Iosevka
  • 合字対応
  • aやg等について12種類のスタイルから選択可
• Migu 1M
  • M⁺とIPAの組合せ
  • 区別しやすいように工夫がしてある
  • Rictyフォントの元

設定はIosevka,'Migu 1M'となります。Iosevkaを前にすること、,で区切ること、空白が含まれるフォント名は'または"で囲むことが重要となります。Iosevkaはいくつか種類がありますが、01-iosevka-#.#.#またはiosevka-ss[01-11]-#.#.#から好みのスタイルを選んでインストールして下さい。

後書き

いかがだったでしょうか？いや、Rictyが最強とか、Source Han Code JPこそが至高だとか、時代はMyricaとか言う人もいるかも知れません。そこは自分で見つけるしかないと思います。私にとってはIosevka,'Migu 1M'だったと言うだけです。

この方法はElectron製等の一部のアプリケーションでしか使用できません。ほとんどのアプリケーションではフォントは一つだけしか設定できないからです。その場合は、やはり自分でフォント合成しか道はないと思います。

付録

各フォントでの表示を見比べるのに下記を使用しました。

プログラミング用フォント確認

各フォントはOSにインストールしていることが前提です。また、インストール後にブラウザを再起動しないと読み込まれないようです。フォントを追加したい場合はforkしてリストに足して下さい。

Atomでの設定

• Settings
  • Editor Settings
    • Font Family
      Iosevka,'Migu 1M'

Visual Studio Codeでの設定

editor.fontLigaturesも有効にする必要があります。

• 基本設定

  • 設定
    下記行を追加

        "editor.fontFamily": "Iosevka,'Migu 1M'",
        "editor.fontLigatures": true,
    

BoostNoteでの設定

Iosevkaでは細すぎたのでIosevka Mediumにしています。

• Preferences
  • Interface
    • Editor
      • Editor Font Family
        'Iosevka Medium','Migu 1M'

---

更紗ゴシックの情報を追記しています。Twitterでつぶやかれていたのに気付かなかった。

1. ⅔でも良いという人がいるかも知れない。 ↩

2. 制御文字表記に使用するため。 ↩

3. Inzuiというのもありますが、現在は開発停止しており、更紗ゴシックはそのInzuiの後継になります。 ↩