【GitHubの新フォント】Monaspaceを試してみる
Monaspaceとは
"Mo no space" ではなくて、"Mo na space"
GitHubが最近リリースしたコーディング用の新しいフォント。
コーディング用のフォントといえば、Monospaceと呼ばれる等幅フォントですが、Monaspaceはそれを進化させたようなものです。
Monaspaceの特徴
等幅フォントの問題点
等幅フォントの良いところは、文字の幅が揃っているため、コードのインデントが綺麗に揃うことです。
しかし、全て文字の幅が同じということは、それぞれの文字の密度が異なるということでもあります。
ここについては、公式が面白くて分かりやすい解説をしているので、ぜひ読んでみてください。
公式の解説が一番とはいえ、せっかく記事にするので簡単に例を示すと。
mとiでは明らかにiの方が痩せてますが、等幅フォントでは同じ幅になっているため、見た目がスカスカです。
テクスチャ・ヒーリング
Monaspaceは、等幅フォントの問題点を解決するために、文字の幅を変えるが、単語の幅は変えないというアプローチを取っています。
これをテクスチャ・ヒーリングと呼んでいます。
要はこんな感じです。
上の画像を見比べると、mの幅が変わっています。
htmlは、lの幅が狭いため、mの幅を広げています。
htmxは、xが幅をとるため、mの幅が比較的狭めです。
ただ、単語全体の幅は変わっていません。これがテクスチャ・ヒーリングです。
文字の組み合わせといえば、リガチャがありますが、これはまた新しいパターンですね。
ちなみに、Monaspaceはリガチャもサポートしています。
その他の特徴
- 5つのスタイルの異なるフォント(Neon, Argon, Xenon, Radon, Krypton)
- 異なるスタイルを組み合わせて使うことができる
- サイトには、Copilotのサジェストだけ異なるフォントを使う例がありました。
- VFとStatic Fontsの両方が利用可能
- サイトには、Copilotのサジェストだけ異なるフォントを使う例がありました。
- リガチャ
Monaspaceを試してみる
インストール
詳しくはここを読んでください。
macOS
cd util
bash ./install_macos.sh
または
brew tap homebrew/cask-fonts
brew install font-monaspace
Windows
ここからダウンロードしてインストール。
設定
VSCodeのsettings.jsonで設定します。
{
"editor.fontFamily": "Monaspace Neon",
"editor.fontLigatures": true, // リガチャとテクスチャ・ヒーリングを有効にする
}
使ってみる
テクスチャ・ヒーリング
mの窮屈感が和らいで自然な感じに見えます。
感想
正直、等幅フォントに対して問題意識を持っていなかったので、言われてみれば確かに...?と言う感じでした。
ただ、実際に使ってみると、mの窮屈感が和らいで自然な感じに見えたので使ってみようかと思います。
Radon(手書き風)やKrypton（メカニカル風）も面白いのですが、こちらはミックスして使うのが良さそうです。
ちなみに、この記事には関係ないですが、個人的推しフォントはBerkeley Monoです。
Discussion