プログラミング用フォント「Fira Code」は斬新で画期的


Fira Code

Fira Code – Github

見た目が奇抜なコーディング用フォントです。

000

比較演算子<=となっている所が特徴的で面白いですね。

データ上では「<=」なのですが、表示時だけ動的に「≦」に置き換わって見えます。

アロー演算子-->が矢印のような見た目になっている所も面白いですし、[]として表現されている所はかなり斬新だと感じました。記法が複雑で冗長的なC/C++言語で使うととても読みやすいコードになるのでは無いでしょうか。

スポンサーリンク

比較

こちらは「Menlo」フォントと「FiraCode」フォントの比較画像です。JavaScriptをベースにした今風のサンプルコードと各演算子を列挙したサンプルです。

001

===が3本線になっている所はかなりエキゾチックで、思わず指でなぞりたくなるほどです。__が分離してしまっている所は少しもったいない気がしました。

仕組み

フォントの合字(リガチャー)を活用したものなので、大抵のテキストエディタであれば、普通に使えるはずです。私が開発に関わっているテキストエディタ「McEditor」でも問題なく表示されます。

感想

ちょっとしたレビューです。後半ではFira Codeの意外な特性を分析しています。これは本当に恐ろしいほどよく出来たフォントです。

デザイン

*+,=等の演算子が極端に小さい所が良いと感じました。この辺は他のコーディング用等幅フォントも見習ってほしいところです。 記号とアルファベットのメリハリが強いフォントなので、空白文字無しでコードを書いてもそれなりに読めてしまうという特徴もあります。

若干タイプライター風で、セリフ体にも近いフォントなので好みは分かれるかもしれません。「American Typewriter」並にひげが強調されたフォントなので、少し古風な印象を受けました。「DejaVu Sans Mono」や「Ubuntu Monospace」をベースにすればもっと近代的で受けの良いフォントになったのではないかなと感じます。

動的グリフ

合字をフル活用した「Fira Code」の特徴とも言える動的なグリフ表示に関してですが、慣れればそれなりに使えるものだと感じました。

逆に慣れるまでは若干ストレスを感じたり、生産性が下がったりするかもしれません。

仮に慣れたとしても、肝心な生産性はそれほど上がらないのではないでしょうか。我々が普段ネット上で見ているコードは圧倒的に「Fira Code」以外のフォントになるわけですから、そちらに慣れている身である以上は「Fira Code」の使い分けは余計な負担になってしまう可能性があります。

トークン際立つ

ただ「Fira Code」の非常に優れた特徴として、文字同士の区切りが非常に明確だというものが挙げられます。もっと言えばトークン同士の区切りがとてもはっきりとしているのです。これは大変素晴らしいものです。

002 003

このように~~記号が、隣り合う(valから独立して表示されていることがわかるかと思います。同じことを他のフォントでやろうとするとどうしても空白を用いる必要がありif ( ~~ valと大げさに記述しなければなりません。「Fira Code」はそれと同等のことを空白を用いずに実現出来ます。

「Fira Code」で書いたコードは各トークンがとても際立って見えるようになるため、コードの可読性は相当高くなると思われます。

「Fira Code」はプロポーショナルフォントの特徴を等幅フォントの世界に取り入れている点が非常に優れていると言えます。<=に見せる機能はそれほど重要ではなく、むしろおまけと言ってもいいくらいです。「Fira Code」の本質はまさにこのプロポーショナルフォント的な特性にあるのだと思います。

Fira Codeは「等幅フォントであって等幅フォントでない」という非常に面白く斬新で画期的なフォントであると感じます。

広告