VSCodeにははじめから見やすいフォントが入っていますが、コードを書く時間が長くなるほど、フォントの違いが効いてきます。0（ゼロ）とO（オー）の見分けやすさ、l（エル）と1（イチ）とI（アイ）の見分けやすさ、=>のような記号がひとつながりの矢印になる「リガチャ」、そして日本語のコメントの見えかたまで——コーディング専用フォントは、コードを読み書きすることだけを考えて作られています。ここでは無料で使えるおすすめを、タイプ別に見本つきで紹介します。
VSCodeでフォントを変える方法
⌘,（WindowsはCtrl+,）で設定を開く- 検索欄に「Font Family」と入力する
- 出てきた欄に、フォント名を入力する（
'Fira Code', monospaceのように、うしろにmonospaceを残しておくと、読みこみに失敗したときの保険になる）
settings.jsonに直接書く場合はこの2行です。リガチャを使うフォントはfontLigaturesもオンにします。
{
"editor.fontFamily": "'Fira Code', monospace",
"editor.fontLigatures": true
}フォントのインストール方法
エディタで使うフォントは、Webフォントとちがってパソコン本体へのインストールが必要です。といっても手順は簡単です。
- ダウンロードする——Google Fontsで配布されているものはフォントのページの「Get font」→「Download all」から、GitHubで配布されているもの（PlemolJPやUDEV Gothicなど）はリポジトリのReleasesページから、それぞれzipを入手
- zipを展開して、中の
.ttf（または.otf）ファイルをダブルクリック - 開いた画面で「インストール」を押す（Macはフォントブック、Windowsはプレビュー画面が開く）
インストールしたらVSCodeを再起動。これで設定のフォント名として指定できるようになります。
日本語との相性がいい（コメントまで同じ書体）
英字だけのフォントは、日本語のコメントになった瞬間だけ書体がガラッと変わります。ここで紹介する5つは日本語の文字も自前で持っているので、英字と日本語が同じ書体でそろいます。
Source Han Code JP
Adobeが作った、日本語コーディングフォントの本家。英字のSource Code Proと、日本語のSource Han Sans（Noto Sans CJKと同じ設計）を組み合わせています。迷ったらこれ。更新は2020年で止まっていますが、完成された書体なので実用上の問題はありません。活発に更新されているものがよければ、このあとのPlemolJPやUDEV Gothicを。
PlemolJP
IBM Plex MonoとIBM Plex Sans JPを組み合わせた、活発にアップデートが続く人気フォント。半角と全角の幅の比率が1対2で、タブでの整列もしやすい設計。
Moralerspace Neon
Monaspaceと日本語フォントを組み合わせた、比較的新しい日本語コーディングフォント。Monaspace譲りの「texture healing」で、字づまりのバランスも整えてくれます。
UDEV Gothic 35NF
JetBrains MonoベースのラテンとBIZ UDゴシックベースの日本語を組み合わせた、日本語コーディングフォントの人気どころ。「35」は半角3:全角5という文字幅の比率をあらわしています（標準版は1:2）。
HackGen35
定番コーディングフォント「Hack」と、日本語ゴシック「源柔ゴシック」を組み合わせたフォント。UDEV Gothicと同じ作者による、もうひとつの人気どころ。
定番・読みやすさ重視
かざりの少ない、王道のコーディングフォント。長時間コードを読んでも疲れにくいことを重視して作られています。
JetBrains Mono
JetBrains社が「開発者の目の負担を減らす」目的で設計したフォント。文字の高さがそろっていて、行が詰まって見えにくくなりにくいのが特徴。
=>や!==がひとつながりの記号になっている、リガチャ入りの見本です。迷ったらまずこれ。Source Code Pro
Adobeが作った、コーディングフォントの古典。クセがなく、どんなエディタ・テーマにもなじみます。
Cascadia Code
Microsoftが作り、Windows TerminalやVisual Studioに標準で同梱されているフォント。Windows Terminalを使っていれば、すでに手元に入っていることも。VSCodeには同梱されていないので、使うにはインストールが必要です。
Roboto Mono
Googleが作った、Robotoファミリーの等幅版。Android・Chromeまわりでもおなじみの、まっすぐで力強い印象。
Inconsolata
コーディングフォント界隈で長く愛されてきた、細身で上品なミニマルタイプ。
リガチャ（合字）で記号がキマる
=>や!==のような複数の記号が、ひとつながりの形に合体して表示される機能がリガチャ。コードの意味が記号の形でぱっと伝わるようになります。
Fira Code
リガチャ入りコーディングフォントの火付け役。矢印やイコールの合字がとても自然な形をしています。
Victor Mono
リガチャに加えて、コメント部分を筆記体のようなイタリック体で表示できるのが最大の個性。
ちょっと個性を出したい
読みやすさは保ちつつ、文字の形に個性があるタイプ。エディタを開くたびに気分が上がります。
IBM Plex Mono
IBMのブランドフォント一族の等幅版。角がやわらかく、モダンで上品な印象。
Space Mono
タイプライターのような、レトロで武骨な等幅フォント。角ばったカッコや、クセのある字形が持ち味です。
Monaspace Neon
GitHubが開発した、比較的新しいコーディングフォント一族。5つの書体を混ぜて使う「texture healing」という仕組みが特徴で、Neonはその中でもクセの少ない主力タイプ。
Iosevka
驚くほど文字幅がスリムな、縦長のコーディングフォント。カスタマイズの幅も広く、自分好みの太さ・幅に調整して使う人も多い一族。
Anonymous Pro
その名の通り、匿名性のあるそっけない見た目の等幅フォント。昔ながらのターミナルらしい、飾らない雰囲気。
選ぶときのチェックポイント
見た目の好みに加えて、この4つを見くらべると自分に合う1本が見つかります。
| チェック | 見るところ |
|---|---|
| まぎらわしい文字 | 0とO、1とlとIがぱっと見分けられるか |
| リガチャ | 矢印などの合字がほしいか、記号は記号のままがいいか |
| 日本語コメント | 英字と日本語の書体までそろえたいか |
| 文字の幅 | 1行にたくさん入れたいならIosevkaのような細身タイプ |
まとめ
- コーディング用フォントは、Webページ用のフォントとは別物。
0とOの見分けやすさなど、コードを読み書きすることだけを考えて作られている - 迷ったら定番のJetBrains Mono、記号の合字を楽しみたいならFira Code、日本語コメントまで書体をそろえたいならSource Han Code JP
- VSCodeの設定は
editor.fontFamilyの1行だけ。リガチャを使うフォントはeditor.fontLigaturesも忘れずに