1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

プログラミングフォント入門

1
Last updated at Posted at 2026-04-22

みなさん、フォントにこだわってますか?

何故プログラミングフォントか

ソースコードの可読性なんてものは誰もが一度は見聞きする話かと思います。リーダブルコードについては定番なのでここでは語りません。

これは私の昔話なのですが、当時私は商業高校に通っていて、そこで教わったのはCOBOLでした。
授業で一人一台のパソコンが使えた時代ではありましたが、なにせCOBOL教育、使うのはコーディングシートでした。

image.png
画像引用元:https://openmedia.jp/blog2/archives/47

もちろん手書きです。なので、口を酸っぱくして言われたのが「ちゃんと読める字を書け」。

特に注意すべき字がいくつかありました。例えばI、O、C。これらはそれぞれ、1、0、<と読み間違えられないように書かなければなりません。
よってこれらは次のように書くことで明確に区別をするようにも指導がされました。

image.png
他にもZ、D、Uなんかも。

そして時は現代。流石にコーディングシートを使うような仕事をするわけでもなく、パソコン上でレンダリングされた綺麗な文字によってコードが書け──。

image.png
なんだこれは。

画像はVisualStudioのデフォルトフォント「MS ゴシック」でO0O0O0O0O0と書いたものを380%で表示したもの。マジで判別付かん。

このように、結局令和の世においても可読性の高い文字というのは重要になるわけです。
そこで、使用するエディタのフォントを変えて、もっと読みやすくしようというわけです。

フォントの基本

まずはフォントに関する基礎知識から。

プロポーショナルと等幅

フォントは大まかにプロポーショナルフォントと等幅フォントに区別できます。
等幅フォントは文字通り、1文字1文字の幅がすべて同じになるもの。逆にプロポーショナルフォントは文字によって幅が異なるものになります。

例えば「MSゴシック」は等幅フォントですが、「MSPゴシック」はプロポーショナルフォントなので、同じゴシック体でも文字自体の幅や文字間の隙間が異なってきます。

image.png

セリフ体とサンセリフ体

セリフとは、文字の線の端に付いてる棒みたいなやつです。これがあればセリフ体、無いのがサンセリフ体。

日本語フォントにおける代表格としては、セリフ体が「明朝体」で、サンセリフ体が「ゴシック体」になります。

image.png

一般的に、ゴシック体のようなサンセリフ体は見出しやポスターのような短文に、明朝体のようなセリフ体は新聞や書籍などの長文に向いていると言われています。

合字(リガチャー)

合字は複数の文字を1つにまとめたものを言います。

有名なものだとfの後のiの点の省略や、ffと2つ重ねたfの合字。

image.png

プログラミング用のフォントとは

ではプログラミング用に適したフォントとはどのようなフォントか。

最低条件として等幅フォントであること。

image.png

冒頭のコーディングシートの名残もあるかもしれませんが、同じ文字数に対して同じ位置で揃っている方が読みやすいと(私は)感じます。
少なくとも、プロポーショナルの例のwは一見するとvvに見えなくも無いので、等幅フォントにして1字であると判別できる方が良さそうです。

続いてセリフ体かサンセリフ体か。
先述の通り、長文に向いているのがセリフ体です。プログラムコードは長文になるのでセリフ体、と言いたい所ですが、セリフ体は解像度や文字サイズによってはセリフが綺麗に描画されないこともあるとか。

合字についても好みになります。
ただ、プログラミング用フォントにおいて合字に対応しているというのは、文字の合字でなく記号(演算子等)の合字を示しています。

例えば不一致を判断する!=演算子を合字によって次のようにと表示するフォントもあります。

image.png

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

というわけで、プログラミングフォントをいくつか紹介していきます。

Consolas

まずは10年以上前のおすすめから。
WindowsにはVistaの頃から標準でインストールされていて、英語版のVisual StudioではデフォルトのフォントにもなっているのがConsolasです(日本語版はMSゴシック)。
等幅・サンセリフ・合字無しのフォントになっています。

image.png

ポイントは、冒頭に挙げたような間違えやすい文字への対応があること。
MSゴシックでは1はまだ良いとして、l|の区別がしづらく、iも文字サイズによってはlと区別しづらいかもしれません。

一方のConsolasはサンセリフ体ではありますが一部に棒が付くことで識別がしやすくなっています。
ただそれによってl1の区別がしづらくなっている印象はあります。

Cascadia Mono

Visual Studio 2022(英語版)でデフォルト値になっているフォントがCascadia Monoです。ちなみに日本語版はMSゴシックのまま。嫌がらせかな?

image.png
先ほどのConsolasと比べるとこのようになります。
文字の識別のしやすさがより上がっていて、先ほど問題になったlの形が変わって1との区別がしやすくなったのと、全体的に文字が太くなってハッキリしているのが判ります。
0が斜線ではなく点になってるので、そこの好みが分かれるかな。あんまり無いですが、θ(シータ)と並べるとちょっと怪しいかな?

Cascadia Code

Cascadia Monoに合字を加えたものがCascadia Codeです。

image.png

比べるとアロー演算子=>が矢印のようになっていたり、!=演算子が記号で表されていたりと違いがあります。
またよく見ると//++なども合字になっています。特に//は隙間が小さくなることで1つの記号のように見えるのではないでしょうか。

これがプログラミング用フォントの合字です。これの善し悪しは好みだと思いますが、気に入ったならば合字フォントを使ってみると良いでしょう。

Fira Code

ここまではマイクロソフト製のフォントだったので別のものを。

MoZillaが作ったフォントFiraのプログラミング用フォントがFira Codeです。
先のCascadia Codeと同じく合字を有しています。

image.png
Cascadia Codeと比べるとこんな感じ。ここまで来ると誤差というか、好みの問題でしょう。

==が連結していたり、>=の合字の下線が斜めだったりと、よく見ると相違点は結構あります。
「この文字はCascadiaの方が良いけど、こっちはFiraの方が良い」みたいなコトを思ったのでしたら、バリアントを使ってみましょう。

image.png
(引用元:FiraCodeリポジトリ

VSCodeなら設定から合字をバリアントに切り替えることができます。
image.png

この設定によって、おなじFira Codeでも文字を細かく変更できます。
image.png

この機能はCascadia Codeにもあるのですが、Fira Codeの方が選択肢できる文字・合字が多いです。

Firge

ここまでのフォントは基本的に英字フォントでした。
ただ私は日本人なので、コメントであったり文字列なんかに日本語が使われることも多々あります。
そこで日本語部分にも拘りを、ということで取り上げるのがこのFirgeです。

このフォントはFira Monoと源真ゴシック(これ自体もAdobeの源ノ角ゴシックがベース)を組み合わせたものになっています。

image.png

特徴的なのは「ー(長音)」や「一(いち)」といった文字の区別がしやすくなっていること。
image.png

また、判りづらいですが半角文字と全角文字の幅が1:2になっていますので、半角・全角が混じっていても綺麗に位置が揃います。
ただ、ちょっと窮屈な感じもありますので、完全な等幅にこだわらないのであればFirge35を使うと3:5の比率にもできます。
image.png

ただこのフォント、あくまでベースはFira Monoなので、プログラミング用の合字はありません。
もしFira Codeのような合字を使いたいのであれば、VSCodeなどのエディタなら複数のフォントを指定できますので、Fira Codeが優先されるよう指定することで兼用が可能です。
image.png

image.png
このように、Fira Codeの合字とFirgeの日本語が共存できています。
どちらもFira系なので、違和感もあまり無いと思います。半角と全角の幅が1:2ではないのは残念ですが。

最後に

ここまでで紹介したフォントは、数あるプログラミングフォントのほんの一部に過ぎません。
他にもフォントはありますので、色々試して、自分に合ったフォントを使うと良いでしょう。

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?