57
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アイレット株式会社Advent Calendar 2024

Day 10

【まとめ】プログラミング向けフォント使っていますか?

Last updated at Posted at 2024-12-09

こんにちは~
早速ですが、皆様は普段の開発で使用しているコードエディタではどんなフォントを使っていますか?
我々エンジニアはコードや技術文書などで多くの文字を入力する場面があります。しかし、フォントによっては、数字の「1」と英字小文字の「l」とパイプ記号の「|」、英字小文字の「i」と「j」、数字の「0」と英字大文字の「O」の判別が難しいことから変数名を勘違いしていたことや半角の空白かと思ったら全角の空白だった。。。など視認性の低いフォントによるトラブルを経験したことがあるかと思います。
ですがその問題、プログラミング向けフォントを使うことで解決できます!

日頃からパソコンで多くの文字を読み書きするエンジニアにとって使いやすいプログラミング向けフォントと呼ばれるフォントが世の中には存在します。
そこで、今回は代表的なプログラミング向けフォントをいくつか紹介してみたいと思います。

PlemolJP

有名な金色の麦ジュースをイメージさせるこのフォントは、IBMが開発したフォントであるIBM Plex MonoIBM Plex Sans JPを合体させた日本語向けのプログラミング向けフォントです。
IBM Plex Sans JP自体が個人的には読みやすく好みであるため、PlemolJPをVScodeに設定して日々の開発で使用しています。
image.png
PlemolJP特徴としては、IBM Plex Sans JP由来の 懐が広く読み取りやすい日本語文字とIBM Plex Mono由来の 判読性に優れた英数字のいいとこ取りなフォントになります。また、全角の空白をフォントレベルで可視化されているため、全角の空白が使用されている部分が一目で見つけることができます。
ただし、漢数字の「一」と伸ばし棒の「ー」は同じ文字に見えてしまいまうのが欠点になります。

白源(HackGen)

PlemolJPの作者が作成した、プログラミング向け英文フォントHackと、源ノ角ゴシックの派生フォント源柔ゴシックを合体させたフォントです。
image.png
派生元の源ノ角ゴシック自体は日本語部分をAdobeが作成したこともあり、読みやすいかと思います。英字部分もプログラミング向けのフォントであるため、それぞれの英文字が識別しやすくなるようなデザインになっています。
こちらも全角空白が可視化されています。また、特徴的なものにパイプ記号の|が破断線化されています。

JetBrains Mono

IntelliJなどの様々なIDEを提供しているJetBrains社が開発したフォントになります。エンジニア向けの製品を提供する会社によるエンジニア向けのフォントになります。
image.png
日本語にも対応していますが、特に英字部分については文字の視認性がとても高くデザインされています。また等価演算子==!=など複数の記号を用いる際に文字を合体させるリガチャ(合字)にも対応しています。

Fira Code

こちらはMozilla社が開発しているフォントのFira Monoをプログラミング用に拡張したフォントになります。
image.png
等幅フォントですが、半角文字2つ分は全角文字1つ分より少し大きいサイズであるため、小さいフォントサイズでの半角文字でも比較的読みやすいと思います(前節のJetBrains Monoも同様)。文字については視認性が高くなるようデザインされており、特にアットマーク記号の「@」のデザインが特徴的です。
日本語には対応していませんが、リガチャは対応しています。

0xProto

こちらはソースコードの読みやすさに重点を置いたプログラミング向けフォントになります。
image.png

英字と数字については見た目が似ている文字を差別化した独自の文字形状を採用しているため、文字の視認性を高めたデザインになっています。Firaと同様に半角文字が少し大きく、小さいフォントサイズでも読みやすいフォントだと思います。特に英字小文字の「f」が特徴的です。
ただし、日本語には対応していません。リガチャは対応しています。

Source Han Code JP(源ノ角ゴシック Code)

ソースコードを表示するためにAdobeにより開発されたプログラミング向けフォントのSource Code Proに日本語フォントの源ノ角ゴシックを組み合わせ、両者が調和するように調整されたフォントです。
image.png
英文字や数字などはソースコード表示用に設計されているため視認性が高く、日本語によるコメントを入れた場合でもフォントの違いによるフォントの表示揺れが抑えられます。

さいごに

今回はいくつかのプログラミング向けフォントを紹介しました。
多くの文字や記号を見るエンジニアにとっては読みやすいフォントはバグや構文エラーを防ぐためにも重要になると思います。今回紹介したフォントはいずれも無料で個人利用することができ、VSCodeなどのエディタに設定することができます。ぜひ、この機会に自分にとって使いやすいフォントを探してみてはいかがでしょうか。

57
34
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
57
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?