WebDesigner's Memorandumウェブデザイナーの備忘録

合字に対応したプログラミング用フォント「Fira Code」でテキストエディタが見やすくなる

今までずっと、定番中の定番であるRicty Diminishedというプログラミング用フォントを使っていました。

しかし最近、合字(リガチャ)に対応した「Fira Code」というフォントを見つけて感動し、すぐ移行しました。
今回はそのFira Codeの紹介です。

Fira Codeの特徴

Fira Codeの特徴は「合字(リガチャ)」に対応していることです。
合字というのは、ざっくり説明すると、特定の順番に文字を打つと文字の見た目が変わる仕組みのことです(見た目が変わっているだけなので、実際のデータ上は変わりありません)。

例えば、コーディングをしているとよく出てくる「===」をFira Codeを使って見てみると、キレイな3本線になります。

合字オン・オフの違い

このように、コーディングでよく出てくる記号の組み合わせを、よりキレイに表現してくれるのです。

フォント自体もちょっと丸っこくて可愛く、文字の識別もしやすいのでかなり気に入りました。

Fira Codeのインストール

Fira Codeはオープンソースのフォントで、誰でも自由に使えます。
ダウンロードはこちらのGitHubからダウンロードします。

「FiraCode/distr/ttf」内にフォントがひと通り入っているので、それをインストールしましょう。

ちなみに、合字の組み合わせ表は「FiraCode/showcases」内に入っています。

Visual Studio CodeでFira Codeを適応する

フォント側が合字に対応していても、テキストエディタが対応していなければ合字は表現されません。

今回はその中からVisual Studio Codeで設定する方法をまとめておきます。
まずは[環境設定]→[フォント]の先頭に'Fira Code'と入力して、フォントを切り替えます。

次に[環境設定]で「合字」と検索すると、「合字の設定」という項目が出てくるので、ここを「オン」に設定しておきましょう。

合字のオン

これでフォントの設定と、合字の設定ができたのできちんと表示されるはずです。

まとめ

慣れるとものすごく見やすいですし、記号を1つ入力し忘れている or いつの間にか記号を1文字消してしまっていたなどの間違いに気がつきやすくなります。

日本語もちゃんと表示されるので、自分はテキストエディタもターミナルもとりあえずFira Codeに設定しました。

著者について

プロフィール画像

@31mskz10

1997年生まれ。2016年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

Twitterをフォロー Facebookでいいね