日本語が見やすいプログラミング用フォント集 (NerdFontとFiraCodeもあるよ)
##コード書く気にならない時はフォントを弄ってモチベを上げよう
こんにちは～! いきなりですが、コード書いてますか?
私は今年からもっぱらコーディング作業ばっかりで、ほとんど実験をしなくなりました。
今週は特に会議・打ち合わせが極端に少なく、大好きなコーディング作業が捗ったのはいいものの、今週末はもうコード書きたくないわ💢😠🙅♂️となるレベルでした。
ということで今回、やる気が出ないのでとりあえず見た目をかっこよくしてモチベを上げることにしました 😙
##プログラミング用のフォントたち
いきなりですが、プログラミング向けのフォントが存在するのはご存じでしょうか?
WinOSに標準で入っているconsolasとかはご存じかもしれませんが、少しフォント好きな方ならfiracodeあたりもご存じかと思います。
私もfiracodeでこの二年以上満足していたのですが、ブログを書くようになってから日本語の見た目が気になって仕方が無い病になってしまいました・・・
調べてみたところ、既存のオープンソースフォント(firacodeなど)と日本語フォントを合成したフリーフォントなどが結構な種類あって、テンション上がっちゃいましたので、おすすめどころを紹介しようと思います🔥
###フォント選びのポイント
「プログラミング フォント 日本語」でググれば、良さそうなフォントが沢山でてきます。**が、**あまりに種類が多くて選ぶのは結構しんどいと思います。
💡フォント選びでは以下の点を抑えておくと良いでしょう💡
日本語フォントを取り入れているか
今回調べてみて思ったのですが、日本語フォントを組込んでいるかどうかは結構大事です🀄
特に指定をせずにただfiracodeを使っていると、メイリオあたりが勝手に使われると思いますが、勝手に使われるメイリオと英数字のフォント幅バランスや、フォントの雰囲気などが英数字と調和しないケースが多々あります。
有名どころのオープンソース日本語フォントは限られていますので、以下のフォントが組み込まれているかどうかが見極めポイントではないでしょうか。
- 源ノ角ゴシック (Source Han Sans)
- IPA
- M+
- Plex
文字幅
日本語フォントにこだわったフォントファミリーは英数字と日本語の幅が一定のルールでそろえられています。
多いパターンとしては、①日本語:英数字=2:1、または②日本語:英数字=5:3、のどっちかだと思います。
これは完全に好みだと思いますが、[sc name='hltext' text='この文字幅にこだわりすぎると異様なくらい英数字が細長いものになってしまいます。
']
私は最初2:1比フォントを好んで使っていましたが、最近は英数字もある程度の幅がある5:3フォントを使っています。
こういう文字幅はフォント作成者の方が頑張って文字幅を揃えてくれた結果なので、日本語フォント調整がされていないfiracodeなどではこの文字幅にはなりません。
Nerdfontが入っているか
Nerdfontは特殊なアイコン集です。
Nerdfontを意識的に使う機会はほとんど無いですが、ターミナルの装飾には欠かせません。
powerlevel-10kやoh-my-poshを使用している場合は必須になりますので、ターミナルで使用したいなら要チェック。
フォントリガチャーが入っているか
フォントによってはFiracodeのリガチャー(合字)を組み込んでくれている場合があります。
私はfiracode愛用歴が長いので、<-がきれいな矢印マークになってくれないとかなり寂しい思いをします。
###フォントの使い方
オススメフォントを紹介する前に、VSCodeやRstudioでのフォント設定方法を説明しておきます🔰
Rstudioデスクトップ版
GitHubなどで配布されているフォントファイル(.ttf, .ttc)をインストールしてからアプリを再起動すれば使用可能になっていると思います。
Tools -> Global Options -> Appearence -> Editor Fontから変更可能です。
Rstudio-server
WSL、Linux問わずRstudio serverの場合、フォントのインストール先に一癖あります🛠️
/etc/rstudio/fonts以下にフォントをコピーするのが一つの方法ですが、root権限が無いとこのフォルダに書き込むことはできません。
管理者権限がない場合は~/.config/rstudio/fonts以下へのコピーでも問題ありません。
VisualStudio Code
VSCodeではsettings(UI)かsettings.jsonへの記入をすることになりますが、フォントファミリー名を一言一句間違えずに自分で書く必要があります
このフォントファミリー名をどう調べるか?が問題です🤔
私は今Macを使っていないので確認方法は分かりませんが・・・Windowsでは以下のようにします。
まず、コントロールパネル -> フォント からフォント一覧を開きます。
普通のエクスプローラー画面が開けばOKです。
##おすすめフォント集
今回ご紹介するのは日本語フォント🇯🇵🏯のみです。
日本語にこだわらないなら、firacode, hack, noto sans, ...などなど、いくらでも選択肢がありますので、Coding Fontなどで探してきてみてはいかがでしょうか。
###Ricty Diminished Discord with Fira Code
Ricty diminished discordはCircle M+を日本語フォントに、英数字はInconsolataをミックスされています。
NerdfontやFira codeといったポイントを押さえつつ、「i, l, 1」や「0, O」などの視認性もバッチリなプログラミングフォントです。
約半年、私もRicty diminishedを使っていましたが、ちょっと英数字が小さい印象です。
pythonの例も見ていただくと、他のフォントよりも英数字が控えめな大きさになっており、日本語がやや大きく見えます。
###UDEV Gothic 35NFLG
UDEVはBIZ-UDを日本語に、Jetbrains Monoを英数字にしています。
結論から言うと、今私が使っているのはUDEV Gothicです。
このフォントは"NFLG"、つまり数少ない"NerdFont+Ligature"対応のフォントです。
やっぱり3:5比率フォントはしっかり英数字にも存在感がありつつ、ちょうどいいバランスで作られている気がします。
個々の文字に注目すると特徴的な"u"の形がかわいらしかったりして、すっかり気に入ってしまいました。
###Cica
CicaはRounded Mgen+を日本語に、それ以外ではHackやDejaVu Sans Monoなどが組み合わされています。
日本語表記を見てみると、「な」や「き」の点・とめが繋がっていたり、特徴的です。
日本語を含め、全体的に丸みを帯びたフォントですが、好みが分かれそう。
###Firge 35Nerd
Firgeは源真ゴシックを日本語に、英数字にはHackを使用しています。
スクリーンショットを撮ってる時には気づきませんでしたが、GitHubの配布元を見ると「ー」や「ペ」の端にセリフ様のアクセントが見られます。
これも個性的だとは思いますが、ちょっと変かな・・・。
###HackGen35Nerd
HackGen(白源)は源ノ角ゴシックを日本語に、Hackを英数字にミックスしています。
HackGenにはいくつかのバージョンがあり、3:5の比率・+NerdFontのバージョンが35Nerdです。
Hackと源ノ角ゴシックのバランス、字の丸さなどちょうど良い感じです。
強いて言うなら、ちょっとイタリック体になったときのオリジナリティが欲しいです。シンプルに斜めになっただけな感じがします🤔
###Myrica
Myricaは先に紹介したRictyと多くの点で共通していますが、ヒンティングを行うことで小さなフォントサイズでもガビガビにならず、綺麗な描画になります。
しかし、ヒンティングにまつわる表示はWindowsでは上手くいったりいかなかったりしますので・・・ちょっと心配😓
###源暎モノコード
源暎モノコードは源ノ角ゴシックをベースにアレンジが加えられたフォントです。
源ノ角ゴシックにはおそらく斜体の日本語が無く(?)、英数字の文字幅もかなり太いといった特徴がありました。
一方で源暎モノゴは斜体を含み全てのバランスがちょうどよく収まっており、ひらかなも特徴的でありながら美しく見えます。
ちょっと気になるのは、若干英数字の幅が狭く 縦長な感じがします。
##最後に比較用のまとめ
ちなみに、これらのフォントの中でfiracodeのリガチャが効くのはRictyとUDEVだけです。
###皆さんの好みのフォントは見つかりましたか?
ということで、今回はプログラミングフォントをまとめてみました～!
今回色々と調べてみて気づいたのは、VSCodeで見る限り、フォントが良くてもRのテーマがかなり微妙です。
私最近訳あってRstudioをほとんど使っておらず、VSCodeでRプログラミングしているので、VSCodeのテーマ改善は急務⚠️ ということで 思い切ってVSCodeテーマを自作しちゃいました。
VSCodeのテーマ作りに関する話は次回書こうと思います～! では👋