こんにちは、開発部長でエンジニアの青柳です。

皆さんはコーディング用のフォントに何を使っていますか?

私は全くこだわりがなくて、OS に標準で用意されているMSゴシックや Ubuntu Monospace をいつも使っています。どんな環境でも開発してみせる!との思いから「こだわらないのがこだわり」なんて妙なこだわりがあったりするのですが、もしかするとフォントを変えるだけで開発効率がグッと上がったりするのではないかと、ちょっと考えなおしてコーディングに適したフォントを探してみることにしました。

コーディングに適したフォントとは

ところでコーディングに適したフォントとは、どんなフォントなのでしょうか?

よく言われるのが文字の視認性が高いフォントです。
例えば、1(イチ)I(アイ)l(エル)や、O(オー)0(ゼロ)の判別がしやすいフォントです。これらの文字が判別しにくいと、読み取りミスや入力ミスによって思わぬバグを生んでしまうからですね。
ただ私が思うに、このような視認性は最近はそこまで重視しなくてもよいのではないかと思っています。今やエディタやIDEには当たり前のようにオートコンプリート機能が備わっていますし、リテラル値を色分けして表示してくれたりリアルタイムに文法エラーを表示してくれたりと多くの補助機能がありますので、今さら1IlO0を間違えてバグを生むことはそうそう無いからです。

ではどんなフォントがコーディングに適しているのでしょうか?
私が今回重視したのが「日本語が読みやすい」フォントです。
例えば日本語が潰れていたり、妙に太かったり大きかったりすると、読みにくくてコーディングに集中できなくなりませんか?

ということで今回は、日本語の読みやすさに注目してフォントを選んでみました。

人気のコーディング用フォント4選

候補として最近人気のコーディング用フォントから4つをピックアップしました。
これらのフォントは、表のとおり別々の欧文フォントと和文フォントを組み合わせてできています。

フォント名  欧文フォント名  和文フォント名
Ricty = Inconsolata + M+ FONTS系
CodeM = Source Code Pro + M+ FONTS系
Myrica = Inconsolata + 源ノ角ゴシック系
Source Han Code JP = Source Code Pro + 源ノ角ゴシック

欧文フォントは
・Inconsolate
・Source Code Pro
和文フォントは
・M+ FONTS系
・源ノ角ゴシック系
のいずれかです。
人気はこの4つの源流に集中しているということですね。

ピックアップした4つのコーディング用フォントを見る前に、まずはこれら源流になっているフォントの特徴を見てみます。

視認性に特化した欧文フォント

まずは欧文フォントから。
Inconsolate と Source Code Pro の2つです。

Inconsolata

Inconsolata

SourceCodePro

Source Code Pro

Inconsolata のほうが全体的に縦長になっています。縦長だと欧文:和文の横幅比を1:2にしやすくて、等幅では日本語とのバランスを取るのに有利になりますね。
Source Code Pro はピリオドやカンマなどの“点”が強調されているところが見やすそうです。

私は重視しないと言いましたが、結果的には両方のフォントとも1lIや0Oの判別はしやすいように工夫されており、視認性はともに高いです。

定番の和文フォント

和文フォントは M+ FONTS系と源ノ角ゴシック系の2つ。
フリーの和文フォントが少ないこともあり、人気はこの2つに集中しています。
「系」としているのは改良版の意味で、足りない文字を他のフォントで補ったりしてあるものです。

M+1m

M+ FONTS系の M+ 1m

源ノ角ゴシック

源ノ角ゴシック

どちらのフォントも読みやすいですが、M+ FONTS のほうがポップな印象です。少し丸っぽいところが好みの別れる点かもしれません。
また M+ FONTS は、濁点・半濁点が判別しやすいように少し大きめになっています。

それでは、これら欧文・和文フォントを組み合わせたコーディング用フォントを順にご紹介します。
サンプルコードには欧文・和文のバランスがわかるように日本語を含めました。

Ricty Deminished

Ricty Diminished は、Inconsolata に M+ FONTS 系の Circle M+ 1m を組み合わせたフォントです。

Ricty

Ricty Diminished(欧文:Inconsolata、和文:Circle M+ 1m)

Ricty は使っている方も多い定番フォントですが、さすがに日本語のバランスも良く見やすいですね。
欧文と和文の横幅比が1:2に調整されているので桁揃えがしやすく、オールマイティーに使えるフォントです。

CodeM Font

CodeM Font は、Source Code Pro に M+ FONTS 系の Migu 1m を組み合わせたフォントです。

CodeM

CodeM(欧文:Source Code Pro、和文:Migu 1m)

Ricty Deminished よりも和文フォントが若干小さく文字間もキュッと詰まった印象。日本語の主張が抑えられて英字のコード部分を読みやすく感じます。
ただし欧文:和文の横幅比は1:2になっていません。

Myrica

Myrica の欧文フォントは Ricty Deminished と同じく Inconsolata ですが、和文フォントには源真ゴシックという、Adobe と Google が共同開発した源ノ角ゴシックを改良したものが使われています。

Myrica

Myrica(欧文:Inconsolata、和文:源真ゴシック)

M+ FONTS 系よりも、漢字の線が細くすっきりしています。
日本語のサイズがちょっと大きめですが、文字の視認性は高いと言えます。
欧文:和文の横幅比は1:2です。

Source Han Code JP

Source Han Code JP は、Source Code Pro に源ノ角ゴシックを合わせたフォントです。

SourceHanCodeJP

Source Han Code JP(欧文:Source Code Pro、和文:源ノ角ゴシック)

欧文に対する和文のサイズが今回ご紹介したフォントの中では一番小さく、欧文:和文の横幅比は2:3です。全体的に日本語の主張が抑えられてとてもスマートに見えます。
私は初めは違和感を感じましたが、慣れてくると逆に「今までは日本語が大きすぎた」と思えてきました。新しい感覚を味わえるフォントです。
ただ個人的には、もう少し行間を詰めたいと感じました。

まとめ

日本語の読みやすさに注目しながら、4つのフォントをご紹介しました。

最終的に私は、Ricty Diminished を使ってみることにしました。
欧文:和文の横幅比が1:2になっており既存のフォントから移行しやすく、また日本語のサイズ感もほどよく見やすいと感じたためです。

もうひとつ心惹かれたのは Source Han Code JP ですが、横幅比が特殊なのは悩みどころですね。

皆さんはいかがでしたでしょうか?
最後までお読みいただき、ありがとうございました。

▼お知らせ
FirstLogicでは現在、開発メンバーを募集しています。
詳細は こちら をご覧ください。