プログラミング用フォントの選び方とおすすめフォント

Visual Studio CodeやAtom、Android Studioなどのテキストエディタで、コードを書くのに適したフォントとは一体どんなものでしょうか?

一言で言ってしまうと、それは「ゴシック体の等幅フォント」です。ただ基準がこれだけだと、あまりにゴチャゴチャしすぎてしまいます。例えば、

  1. Myrica
  2. 白源
  3. Ricty Diminished
  4. Cica

などなど。これらは全てゴシック体の等幅フォントですが、こんな風にただ列挙してしまうと、何がどう違うのかがハッキリしません。
しかしルーツを辿るとこれらのフォントの多くは、最終的には2つに分類することができます。

今回はプログラミング用フォントの選び方とおすすめ紹介ということで、

  • 日本語対応フリーフォントの分類と系譜
  • 各フォントの紹介と見え方比較

といったメニューで、皆さんがプログラミング用のフォント選びにこれ以上迷わなくて済むような指針をお伝えできればと思います。

(ゴシック体や等幅フォントに関してはシステムフォントの回でお話しているので、フォントの前提知識として押さえておいてください)

システムフォントを美しく変更して気分をアゲよう!(Windows10)
いきなりですが、Windows使いのあなたに今一度問いたい。「その文字、美しい...
スポンサーリンク

欧文フォントと和文フォント

プログラミング用のフォントを選ぶ上でチェックしておきたいポイントは、そのフォントの「欧文フォント」と「和文フォント」が、それぞれ何を使用しているかです。

1バイト文字の欧文フォントと、2バイト文字の和文フォントを組み合わせて出来ているのが日本語対応フォントですが、フリーフォントは漢字も含めて全てオリジナルといったことなどほぼあり得ません。
数多くの漢字を網羅するには想像を絶する手間が掛かるからです。

そこでフリーフォント製作者は、元からあるフォントをこの中のどれかに当てはめ、その上で足りない文字を追加したり、細部を修正するなどして新しいフォントファミリとしてリリースしています。

事前にこの組み合わせをチェックしておくことで、そのフォントのキャラクターや背景がなんとなく想像できるはずです。

日本語対応フリーフォントの分類と系譜

それを踏まえた上で、ズラッと並べてみましょう。
ここに掲載しているのは合計18種類の日本語対応等幅フォント(等幅ではない源ノ角ゴシックを除く)ですが、1つの例外も無く最終的には2つのフォントに行き着くのが分かると思います。

まずは源ノ角ゴシックとM+、どちらから派生したフォントなのかを把握しておくことで、「色々ダウンロードしたけど、どこが違うのかイマイチ分からない」なんてことにならずに済むはずです。

ここまでのポイント:

フォントの欧文、和文にそれぞれ何が使われているかをチェックしよう!

おすすめフォント (源ノ角ゴシック系)

それではここから、各フォントをご紹介していきます。まずは源ノ角ゴシックをルーツに持つフォントたち。

サンプル画像では「0とO(オー)」、「1とl(L)とI(i)」、「カタカナのエと漢字の工」、「一(漢数字)とー(横棒)」、また濁音と半濁音などを比較しています。多くの記号や文字が混在するプログラミングではこれらの判読性も重要です。全体の印象と合わせてチェックしておきましょう。

なおフォントサイズは14px、行間1.2、太さはRegularや無印で統一しています。

Source Han Code JP / Source Han Mono

元々Pan-CJK(東アジア汎用フォント)を目指して開発されていた源ノ角ゴシックから日本語部分を抜き出し、コード用の等幅欧文フォント「Source Code Pro」と合わせたのがSource Han Code JP
それに加え、東アジア各国の漢字や『令和』の合字に対応させたのがSource Han Monoです。

インストール方法などはこちらで取り上げています。

Source Han Code JPのインストールと使い方。VSCodeやIntelliJで使うには? (Windows)
追記: Source Han Monoについて2019年5月27日、新しく「S...
Source Han(源ノ)系フォントの選択とダウンロードガイド
Source Han MonoやCode、Sans…沢山ありすぎてどれを選べばいいか分からん!という方へ。用途に合わせたフォントのダウンロードとインストールを行います。

源真ゴシック / 源柔ゴシック Monospace

OpenTypeフォントである源ノ角ゴシックをTrueTypeに変換し、起こりうるエラーを抑制して汎用性を高めた源真(げんしん)ゴシック
角ゴシックとしての風合いを残しながら、角を丸めて柔らかい印象に変更したのが源柔(げんじゅう)ゴシック
テキストエディタで使うような場合は両者の違いがほぼ分かりませんが、文字が大きく太くなると印象が変わってきます。

このフォントとSource Han Code JPを比較すると、パッと見で違うのは欧文フォントの文字幅です。Source Han Code JPは特徴的な全角3 : 半角2の文字幅なのに対し、こちらは2 : 1と一般的な文字幅となっています。

源真ゴシック (げんしんゴシック) | 自家製フォント工房
源真ゴシック (げんしんゴシック) は、Adobeのオープンソースフォント「源ノ角ゴシック」を TrueType 形式に変換し、普段使いにおける使い勝手を重視したカスタマイズを施したフリーフォントです。
源柔ゴシック (げんじゅうゴシック) | 自家製フォント工房
源柔ゴシック (げんじゅうゴシック) は、Adobe のオープンソースフォントである「源ノ角ゴシック」に、角を丸める加工を行い丸ゴシック風にしたフリーフォントです。

Myrica

欧文フォントにInconsolata、和文フォントに源真ゴシックを採用したMyrica(ミリカ)。上の2つと比べると、欧文フォント部分が若干明朝っぽくなったのが分かるでしょうか。
源真ゴシックを元に、小さい文字でも読みやすく改良したフォントであり、「エと工」や「一とー」、半濁音などが見分けやすくなっています。

これの姉妹フォントとして「MyricaM」がありますが、テキストエディタで使う際はフォント名の指定に注意です。
Myricaを使う場合は『Myrica M』、MyricaMなら『MyricaM M』と指定しましょう。スペースの後のMは文字幅MediumのM。文字幅が狭い(Narrowの)Nも同時にインストールされます。

プログラミングフォント Myrica / Estable
プログラミング用フォント MyricaMyrica (ミリカ)は、フリーなプログラミング用 TrueType フォントです。視認性、判別性 が高くなるように、複数のフォントファイルを元に合成/修正しました。フォントの特徴多くの特徴をプログラ

原暎ゴシックM

源真ゴシックを元に、0の斜線など調整を施した源暎ゴシック(げんえいゴシック)。以下のサイトにはゴシック体以外にも明朝体や漫画の吹き出し用、数字用、他にも様々な種類のフォントが公開されています。
プログラミング用として使うなら、等幅の「源暎ゴシックM」を選びましょう。

【フリーフォント】源暎ゴシック - 御琥祢屋

白源

欧文フォントにHack、和文フォントに源柔ゴシックを合わせた白源(はくげん)。上のサンプルには含まれていませんが、|(パイプ文字)が上下に分割され、1やLと区別しやすくなっているのもポイントです。

さらに特徴的なのが「文字幅の選択肢が豊富」という点。同梱される「HackGen35」は全角文字5 : 半角文字3という独特の文字幅を持つオプションフォント。

さらにコンソール表示に最適化した「HackGen Console」も同梱されています。

文字幅5:3のオプションは他ではあまり見かけない、個人的に注目度の高いフォント。

【文字幅 半角3:全角5 も追加】Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita
(2020/06/02) Nerd Fonts を追加で合成した v2.0.0 をリリースしました。 (2020/07/28) 濁音文字の判読性を向上した v2.1.0 をリリースしました。 (2020/08/01) macOS で ...

Nasuフォント

源真ゴシックを改変し、濁音と半濁音を判別しやすくしたNasuフォント。白源と源真ゴシックのちょうど中間辺りに位置するような感覚。半濁音は強調していますが、濁音に関してはそこまで強調されていません。

このフォントは可変幅のNasu、等幅のNasuMがあります。プログラミング用ならもちろんM。

ちなみにNasuというフォント名は、源氏の武将で弓の名手であったとされる「那須与一」から取ったものらしいです。どうでもいいけど。

Nasuフォント : 見た目が似ている文字を判別しやすくするフリーフォント - itouhiroはてなブログ
Nasu(ナス)フォントを作成しました。

おすすめフォント (M+系)

ここからはM+をルーツに持つフォントたち。
オリジナルのM+は直線的なデザインのType-1と、現代的な表情を併せ持つType-2に大きく分かれますが、その派生フォントもこれに習ってバリエーションがある場合があります。
どちらか迷うなら等幅の場合「mplus-1m-regular」などType-1を前提として選べばOK。

M+ FONTS | JAPANESE

Mgen+ 1m

Mgen+(むげんプラス)はM+に無いグリフを源ノ角ゴシックで補ったフォント。丸ゴシックのRounded Mgen+、さらに各々のバリエーションまで含めると、その数はかなり多くなります。

  • Mgen+ (角ゴシック)
    • Type-1
    • Type-2
  • Rounded Mgen+ (丸ゴシック)
    • 標準
    • L (丸みを抑えたバージョン)
    • X (丸みを強調したバージョン)

それぞれ可変幅/等幅が同梱されています。これらのファイルをダウンロードした上で、等幅なら「m」が付いたものをインストールしてください。

今回サンプルで使用しているのは角ゴシック・等幅・Type-1の「Mgen+ 1m」です。

Mgen+ (ムゲンプラス) | 自家製フォント工房
Mgen+ (ムゲンプラス) は、オープンソースフォントである「M+ OUTLINE FONTS」をベースに、これに含まれない漢字・記号を「源ノ角ゴシック」で補ったフリーフォントです。
Rounded Mgen+ (ラウンデッド ムゲンプラス) | 自家製フォント工房
Rounded Mgen+ (ラウンデッド ムゲンプラス) は、オープンソースフォントの「M+ OUTLINE FONTS」をベースに、これに含まれない漢字や記号を「源ノ角ゴシック」で補い、さらに角を丸くする加工で丸ゴシック化したフリーフォントです。

Cica

欧文フォントにHackとDejaVu Sans Mono、和文フォントにRounded Mgen+を採用したCica(シカ)

Mgen+との比較で分かりやすいのは英数字の縦横比率と「m」の文字。真ん中の線を短くすることによって、「rn」との違いを明確にしています。

miiton/Cica
プログラミング用日本語等幅フォント Cica(シカ). Contribute to miiton/Cica development by creating an account on GitHub.

VLゴシック

M+を基準に、漢字の不足部分を新規作成、またはさざなみゴシックを改変して補填したVLゴシック

M+をそのまま採用している部分も多いため、サンプルの範囲内ではMgen+と見分けがつかないかもしれません。気になる方は漢字で試してみてください。

可変幅、等幅両方ダウンロードされるので、等幅は「P」の表記が無いものを使いましょう。

VL Gothic Font Family

Myrica M

欧文フォントにInconsolata、和文フォントにMgen+を採用したMyrica M。Myricaと同じく判読性に優れます。文字幅の狭いNも同梱。

MyricaM
MyricaM.ttcASCII文字は Inconsolata、それ以外の文字は Mgen+ をベースとした以下の3フォントをパッケージしたファイルです。 7z圧縮版 約4MB ダウンロード zip圧縮版 約8MB ダウンロードMyri

Ricty Diminished

欧文フォントにInconsolata、和文フォントにM+を加工して判読性を向上させたCircle M+1mを使用したRicty Diminished
兄貴分のRictyは諸々の事情で導入に若干手間がかかるため、今回は簡単に使えるこちらをご紹介します。

その姉妹フォントがRicty Diminished Discord。欧文フォントのInconsolataを加工し、さらに判読性重視に振ったバージョンです。

チルダ(~)が上に位置したり「D」に横棒が入ったりするのはMyricaMと共通しています。

プログラミング用フォント Ricty Diminished
タイトルとURLをコピーしました