べんりワザ・VSCode を速く使う

おすすめのコーディング用フォント

エディタで使う「コードを書くためのフォント」は、Webページ用のフォントとはまた別物です。0とOの見分けやすさ、矢印がキマるリガチャ、日本語コメントの見え方まで、タイプ別に見本つきで17種類紹介します。

VSCodeにははじめから見やすいフォントが入っていますが、コードを書く時間が長くなるほど、フォントの違いが効いてきます。0（ゼロ）とO（オー）の見分けやすさ、l（エル）と1（イチ）とI（アイ）の見分けやすさ、=>のような記号がひとつながりの矢印になる「リガチャ」、そして日本語のコメントの見えかたまで——コーディング専用フォントは、コードを読み書きすることだけを考えて作られています。ここでは無料で使えるおすすめを、タイプ別に見本つきで紹介します。

べんりワザGoogle Fontsで文字の顔を変えるこちらはWebページに表示する文字のためのフォント。この記事で紹介するのは、エディタで自分がコードを書くためのフォントです

VSCodeでフォントを変える方法

  1. ⌘,（WindowsはCtrl+,）で設定を開く
  2. 検索欄に「Font Family」と入力する
  3. 出てきた欄に、フォント名を入力する（'Fira Code', monospace のように、うしろにmonospaceを残しておくと、読みこみに失敗したときの保険になる）

settings.jsonに直接書く場合はこの2行です。リガチャを使うフォントはfontLigaturesもオンにします。

{
  "editor.fontFamily": "'Fira Code', monospace",
  "editor.fontLigatures": true
}

日本語との相性がいい（コメントまで同じ書体）

英字だけのフォントは、日本語のコメントになった瞬間だけ書体がガラッと変わります。ここで紹介する5つは日本語の文字も自前で持っているので、英字と日本語が同じ書体でそろいます。

Source Han Code JP

Adobeが作った、日本語コーディングフォントの本家。英字のSource Code Proと、日本語のSource Han Sans（Noto Sans CJKと同じ設計）を組み合わせています。迷ったらこれ。

同じコードと日本語のコメントが、Adobe製の端正な日本語コーディングフォントで表示されている見本
英字も日本語も、Adobeの高い設計力で仕上げられた安心感のある書体。企業のプロダクトとしての信頼性も魅力です。

Source Han Code JP

PlemolJP

IBM Plex MonoとIBM Plex Sans JPを組み合わせた、活発にアップデートが続く人気フォント。半角と全角の幅の比率が1対2で、タブでの整列もしやすい設計。

同じコードと日本語のコメントが、IBM Plexベースの日本語コーディングフォントで表示されている見本
IBM Plex Monoと血統がそろっているので、英字だけのIBM Plex Monoから乗りかえても違和感がありません。

PlemolJP

Moralerspace Neon

Monaspaceと日本語フォントを組み合わせた、比較的新しい日本語コーディングフォント。Monaspace譲りの「texture healing」で、字づまりのバランスも整えてくれます。

同じコードと日本語のコメントが、Monaspaceベースの新しい日本語コーディングフォントで表示されている見本
Monaspace Neonの雰囲気そのままに、日本語のコメントも自然に溶けこみます。

Moralerspace

UDEV Gothic 35NF

Cascadia CodeベースのラテンとBIZ UDゴシックベースの日本語を組み合わせた、日本語コーディングフォントの人気どころ。「35」は英字と日本語の幅の比率をあらわしています。

同じコードと日本語のコメントが、英字も日本語も同じ書体で統一されて表示されているコーディングフォントの見本
英字のコードも日本語のコメントも、継ぎ目なく同じ書体で並びます。日本語コメントを多用する人におすすめ。

UDEV Gothic

HackGen35

定番コーディングフォント「Hack」と、日本語ゴシック「源柔ゴシック」を組み合わせたフォント。UDEV Gothicと同じ作者による、もうひとつの人気どころ。

同じコードと日本語のコメントが、英字も日本語も同じ書体で統一されて表示されている、やや丸みのあるコーディングフォントの見本
UDEV Gothicより少しやわらかい印象。日本語対応フォントも1つに決めきれないなら、何本か入れて見くらべてみるのもおすすめです。

HackGen

定番・読みやすさ重視

かざりの少ない、王道のコーディングフォント。長時間コードを読んでも疲れにくいことを重視して作られています。

JetBrains Mono

JetBrains社が「開発者の目の負担を減らす」目的で設計したフォント。文字の高さがそろっていて、行が詰まって見えにくくなりにくいのが特徴。

「const arrow = (a, b) => a !== b;」というコードと日本語のコメントが、くっきり読みやすいコーディングフォントで表示され、矢印の記号がひとつながりになっている見本
=>や!==がひとつながりの記号になっている、リガチャ入りの見本です。迷ったらまずこれ。

JetBrains Mono

Source Code Pro

Adobeが作った、コーディングフォントの古典。クセがなく、どんなエディタ・テーマにもなじみます。

同じコードと日本語のコメントが、リガチャのないオーソドックスなコーディングフォントで表示されている見本
記号は記号のまま表示される、いちばんオーソドックスなタイプ。安定感を求める人向け。

Source Code Pro

Cascadia Code

Microsoftが作り、VSCodeやWindows Terminalに標準で同梱されているフォント。すでにインストール済みという人も多いはず。

同じコードと日本語のコメントが、Microsoft製の端正なコーディングフォントで表示されている見本
矢印の合字もあり、定番として選んでも個性を出しても、どちらでも使える万能タイプ。

Cascadia Code

Roboto Mono

Googleが作った、Robotoファミリーの等幅版。Android・Chromeまわりでもおなじみの、まっすぐで力強い印象。

同じコードと日本語のコメントが、まっすぐで力強い印象のコーディングフォントで表示されている見本
どんなOS・エディタでも違和感なくなじむ、もう1つの安全牌。

Roboto Mono

Inconsolata

コーディングフォント界隈で長く愛されてきた、細身で上品なミニマルタイプ。

同じコードと日本語のコメントが、細身で上品なミニマルなコーディングフォントで表示されている見本
文字がすっきり細めなので、コードをたくさん画面に映したい人に向いています。

Inconsolata

リガチャ（合字）で記号がキマる

=>や!==のような複数の記号が、ひとつながりの形に合体して表示される機能がリガチャ。コードの意味が記号の形でぱっと伝わるようになります。

Fira Code

リガチャ入りコーディングフォントの火付け役。矢印やイコールの合字がとても自然な形をしています。

同じコードと日本語のコメントが、矢印の合字がなめらかに表示されるコーディングフォントで表示されている見本
リガチャの完成度の高さで人気に火がついた定番。迷ったらJetBrains Monoと2択で選んでもいいくらいです。

Fira Code

Victor Mono

リガチャに加えて、コメント部分を筆記体のようなイタリック体で表示できるのが最大の個性。

同じコードが、コメント部分だけ筆記体のようなイタリック体で表示され、日本語のコメントはイタリックにならず通常の書体で表示されているコーディングフォントの見本
英字のコメントだけくるっとしたイタリックになるので、コードと説明文の境目が一目でわかります。日本語の部分は書体の性質上イタリックにはなりません。

Victor Mono

ちょっと個性を出したい

読みやすさは保ちつつ、文字の形に個性があるタイプ。エディタを開くたびに気分が上がります。

IBM Plex Mono

IBMのブランドフォント一族の等幅版。角がやわらかく、モダンで上品な印象。

同じコードと日本語のコメントが、角のやわらかいモダンな印象のコーディングフォントで表示されている見本
きれいめでビジネスライクな雰囲気。仕事用のエディタにもなじみます。

IBM Plex Mono

Space Mono

タイプライターのような、レトロで武骨な等幅フォント。数字の0にスラッシュが入り見分けやすい。

同じコードと日本語のコメントが、タイプライター風でレトロな印象のコーディングフォントで表示されている見本
クセのある形が逆に個性的。ターミナルっぽい雰囲気が好きな人におすすめ。

Space Mono

Monaspace Neon

GitHubが開発した、比較的新しいコーディングフォント一族。5つの書体を混ぜて使う「texture healing」という仕組みが特徴で、Neonはその中でもクセの少ない主力タイプ。

同じコードと日本語のコメントが、GitHub製の新しいコーディングフォントで表示されている見本
文字の太さのバランスがよく考えられた、今どきのフォント。ほかとひと味ちがう見た目にしたい人向け。

Monaspace

Iosevka

驚くほど文字幅がスリムな、縦長のコーディングフォント。カスタマイズの幅も広く、自分好みの太さ・幅に調整して使う人も多い一族。

同じコードと日本語のコメントが、文字幅の細い縦長のコーディングフォントで表示されている見本
1行に入る文字数を増やしたい人向け。細身なぶん、たくさんコードを並べても圧迫感が出ません。

Iosevka

Anonymous Pro

その名の通り、匿名性のあるそっけない見た目の等幅フォント。昔ながらのターミナルらしい、飾らない雰囲気。

同じコードと日本語のコメントが、そっけない昔ながらのターミナル風のコーディングフォントで表示されている見本
華やかさより実用性重視。長く使われてきた安心感があります。

Anonymous Pro

まずは今使っているフォントのまま、見本と見くらべてみて。「あ、こっちの方が読みやすいかも」と思ったら、それが変えどきだよ〜

まとめ

  1. コーディング用フォントは、Webページ用のフォントとは別物。0とOの見分けやすさなど、コードを読み書きすることだけを考えて作られている
  2. 迷ったら定番のJetBrains Mono、記号の合字を楽しみたいならFira Code、日本語コメントまで書体をそろえたいならSource Han Code JP
  3. VSCodeの設定はeditor.fontFamilyの1行だけ。リガチャを使うフォントはeditor.fontLigaturesも忘れずに

よくある質問

コーディング用フォントは無料で使えますか？
ここで紹介している17種類はすべて無料で商用利用もできるオープンソースフォントです。安心してダウンロード・インストールできます。
日本語のコメントを書くときも使えますか？
英字専用のフォントでも、日本語の部分はVSCode側が自動でシステムの日本語フォントに切りかえて表示するので、そのまま使っても表示は崩れません。英字と日本語の書体をぴったりそろえたい場合は、記事内の「日本語との相性がいい」で紹介したSource Han Code JPのような日本語コーディングフォントを選ぶと、コメントまで同じ書体で統一できます。

人気のべんりワザ