VSCodeのおすすめフォント5選！概要から設定方法まで図解

VSCodeのおすすめフォント

VSCode（Visual Studio Code）は、多機能なコードエディタです。カスタマイズ機能が充実しており、表示するフォントもお気に入りのフォントに切り替えることができます。ここでは、コードエディタに最適なおすすめフォント5選、そしてその設定方法を図解していきます。

VSCodeとは？定番のコードエディタを他のエディタと比較して解説

プログラミングで使用するコードエディタは、プログラミング言語を記述するとともにコメント入力やマニュアルページやヘルプガイドの作成など、文章の作成にも使用されます。

プログラミング言語のコメントアウトでは、日本語の説明文を記述することも多く、全角と半角の調和がとれていないとメンテナンス性が低下する可能性があります。

このことから、テキストエディタやコードエディタでは、フォントの選択やサイズ変更を行って、表示を最適化するのが有効です。

特に全角と半角のフォントは、文字幅比率を1：2とすることで、コーディングの部分とコメントの記述の表示を統一させることができます。それぞれの文字の幅が異なると、表示のずれを生じるため、プログラミングフォントでは等幅フォントが好まれます。

VSCodeのおすすめフォント5選

ここでは、VSCodeでフォントを変更して表示の違いを確認していきます。VSCodeがインストールされるとデフォルトで標準フォントが設定されます。標準では、「Consolas, 'Courier New', monospace」の3種類が登録されています。

フォントの違いを確認するために、JavaScriptのコードにコメントを追加し、表示を確認します。最初に標準フォントの表示を示します。

表示では、半角スペースと全角スペースの幅や表示の違いが確認できます。同様に数字の0と、アルファベットのoとOの違いや、数字の1と、アルファベットのiとIの違いなども気になるポイントです。以降では、おすすめフォントの概要と表示例を図解していきます。

VSCodeをインストールする方法とは？設定方法まで丁寧に解説

Source Han Code JPは、Adobeが公開するフォントでSource Han Sans JP（源ノ角ゴシック Code）をベースとし、14種類のフォントファミリで構成されています。コーディング用に開発されたSource Code Proとの調和がされており、見やすさが追求されています。

最新版は「2.012R」で、「SourceHanCodeJP.ttc」をインストールして使います。VSCodeでは、 ’源ノ角ゴシック Code JP’ をフォントファミリに指定します。

表示を見ると標準フォントと比べて、半角スペースや全角スペース、数字の0などに違いがあります。

【参考】：GitHub adobe-fonts/source-han-code-jp 【参考】：GitHub adobe-fonts/source-han-code-jp Releases 2.012R

PlemolJP（プレモル ジェイピー）は、IBM Plex Mono と IBM Plex Sans JPを合成した日本語プログラミングフォントです。ウェイト（太さ）はThinからBoldまで8種類が提供されます。

フォントファミリは、文字幅比率1：2の通常版PlemolJPのほか、コンソール表示用PlemolJP Console、文字幅比率3：5のPlemolJP35、PlemolJP Consoleを文字幅比率3：5に変更したPlemolJP35 Consoleから選べます。

最新版は「v1.7.1」で、「PlemolJP_v1.7.1.zip」をダウンロードして使います。ZIPファイルの通常版PlemolJPフォルダーには、16のフォントが含まれます。

全角スペースは、型抜きがされた表示で半角スペースとの違いが分かります。数字の0や1もアルファベットのOやIと区別がつきやすいです。

【参考】：GitHub yuru7/PlemolJP 【参考】：GitHub yuru7/PlemolJP Releases v1.7.1

HackGen（白源、はくげん）は、英文フォントHack と、源ノ角ゴシックの派生フォント源柔ゴシックを合成したフォントです。

フォントファミリは、文字幅比率1：2の通常版HackGenのほか、コンソール表示用HackGen Console、文字幅比率3：5のHackGen35、HackGen Consoleを文字幅比率3：5に変更したHackGen35 Consoleから選べます。

最新版は「v2.9.0」であり、「HackGen_v2.9.0.zip」をダウンロードして使います。

半角スペースと全角スペースは等幅に構成されています。全角スペースは、型抜きがされた表示で半角スペースとの違いが分かりやすいです。数字の0や1もアルファベットのOやIと区別がつきやすいです。

【参考】：GitHub yuru7/HackGen 【参考】：GitHub yuru7/HackGen Releases v2.9.0

Moralerspace は、欧文フォントMonaspaceと、日本語フォントのIBM Plex Sans JPなどを合成したフォントです。

最新版は「v1.0.2」であり、文字幅比率3：5が通常版で、「Moralerspace_v1.0.2.zip」です。20のフォントがZIPファイルに含まれます。

この他、文字幅比率1：2、通常版に記号類を全角幅にしたフォント、文字幅比率1：2に記号類を全角幅にしたフォント、Nerd Fontsを追加合成したものなど、6種類が個別のzipファイルで提供されます。

フォントの種類が非常に多いので、ここでは ’Moralerspace Neon’ を使用して確認します。

このフォントも、全角スペースは型抜きがされた表示で半角スペースとの違いが分かりやすく、数字の0や1もアルファベットのOやIと区別がつきやすいことが分かります。文字幅比率1：2は、「MoralerspaceHW_v1.0.2.zip」に含まれますので、違いを比べながら設定することもできます。

【参考】：GitHub yuru7/moralerspace 【参考】：GitHub yuru7/moralerspace Releases v1.0.2

M+ Fontsはモダンな各ゴシック体のフォントですが、丸みを帯びたかわいい字体を採用しています。GF Latin Plusのグリフセットに対応したサンセリフ書体と、5,700字以上の漢字を含む日本語で構成されています。ウェイトはThinからBoldまで9種類が提供されます。

ここでは、 ‘M PLUS 1’ を登録し表示を確認します。

このフォントは、やわらかいデザインでかわいい印象を受けます。数字の0は、アルファベットのOに近い印象があるフォントですので、このフォントを使用する場合は区別がつくように使用すると良いでしょう。

【参考】：M+ Fonts 【参考】：Google Fonts M+ Fonts 【参考】：GitHub M+ Fonts

VSCodeのフォントの設定方法

VSCodeのフォントを設定するには、使用するOSの操作手順に従ってフォントをあらかじめシステムに登録する必要があります。システムに登録されたフォントはVSCodeで使用できます。ここでは、システムの登録からVSCodeの設定まで、一連の設定方法を図解していきます。

フォントをシステムに登録するには、OS毎に手順が定められています。VSCodeで最も利用されているOSはWindowsですので、ここではWindowsの環境を使用してフォントの設定方法を確認していきます。

登録するフォントは、フォントのダウンロードサイトからローカルPCに、あらかじめダウンロードしておきます。ダウンロードファイルのZipファイルは、ファイルの中を直接開くか展開して使用します。

下の例では、今回紹介するおすすめフォント5選をフォルダに保存しておき、ttfやttcのフォントファイルは右クリックメニューからインストールすることができます（①②）。

ファイルをダブルクリックすると、フォントビューアが立ち上がりますので、そこから「インストール」をクリックしてインストールすることもできます（①）。

システムに登録されているフォント一覧は、「設定」アプリの「個人用設定」「フォント」から確認できます。同様に、 ”C:¥Windows￥Fonts” のフォルダ、あるいは「コントロールパネル」の「フォント」からも確認することができます。

VSCodeでは、左ペインに表示されるActivity Barに、主要なアイコンが表示されています。左ペイン下部の設定アイコンをクリックすると（①）、表示されたメニューから「設定」をクリックし（②）、設定画面を開くことができます。

この設定画面は、「編集」メニューの「ユーザー設定」「設定」でも表示させることができます。ショートカットキーは、「Ctrl」＋「,」に割り当てられています。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

設定画面が開いたら、「フォントファミリ（Font Family）」でフォントを指定することができます。フォントファミリは、「よく使用するもの」に表示されています。

フォントファミリが「よく使用するもの」に見当たらない場合は、次のように「テキストエディター」の「フォント」に項目があります（①②）。

フォントを登録するには、フォントファミリの先頭に追記します。スペース（空白）を含む名称は、クォーテーションで囲みます。

設定変更は、すぐに反映されますが、フォントが反映されない場合は再起動したり、フォントファミリを使用するフォントのみに差し換えたりして確認すると良いでしょう。

VSCodeのおすすめフォントから最適なものを選びましょう

VSCodeはコードエディタであり、多様なニーズに対応します。フォントの選択も、プログラミング向けから文章作成まで幅広いものがあります。最適なフォントの選択で、視認性やメンテナンス性の向上が期待できます。今回紹介したおすすめフォントを参考に、ニーズに照らして最適なものを選ぶのがおすすめです。

その他のVSCode関連記事

その他、VSCodeに関連する内容は、下記の記事でもご紹介しています。ぜひ参考にご覧ください。

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

VS Code Serverが登場！インストール方法や使い方・開発方法を解説

VSCodeの使い方を図解！画面説明からよくある質問・操作方法まで解説

VSCodeのテーマの変更方法とおすすめテーマをご紹介！

VSCodeとは？定番のコードエディタを他のエディタと比較して解説