見出し画像

Sublime Textに向いた視認性の高いフォントを探す

先日諸事情からSublime Textをクリーンインストールしました。
ちまちまパッケージを入れ直し、テーマを再設定し、復元できたところで気になったのがこれ。

日本語だけみっちり詰まりすぎ

他のエディタであれば、まず行間やカーニング(文字と文字の間隔)を調整するところです。しかしSublime Textは行間調整はできても、カーニングを調節する機能がありません。ざっとググった感触では該当するパッケージもありません。
つまりSublime Textでカーニングを調節したければ、フォントを変更するしかない。というわけで、自分好みのフォントを探す旅にでました。

なお行間調整はメニューの【Peferences】➡【Settings】をクリックし、右側のウィンドウに下記2行を貼りつけて保存すれば調節できます。数値を大きくすれば行間が広く、小さくすれば狭くなります。
必ず { } の間に貼りつけること。

"line_padding_top": 5,
"line_padding_bottom": 5,




1.好みのフォントの傾向を探る


片っ端から試すのは効率が悪いので、まずフォントに求める絶対条件と、好みの傾向を洗い出します。自分はこんな感じ。

  • Sublime Textの使用用途は、HTML・CSSファイルの編集

  • ゴシック体かつ等幅フォントが望ましい

  • フォントの文字間隔が広め

  • 装飾過多なフォントは避けたい

  • 小文字のlと大文字のI、大文字のOと数字の0は見分けがつく

  • 全角スペースの可視化

  • アスタリスクは行の中央に表示

  • リガチャは不要

※「ゴシックかつ等幅フォントで装飾過多とはなんぞや」と思われた方もいるかもしれません。この装飾とは文字の太さが均一でなかったり、fやrの底に横棒がついていたり、小文字のlが鎌首持ちあげた蛇みたいな形だったりするものを指します。

洗い出しが終わったので、次は条件に合うフォントを探します。
なおここから先は自分の好みでフォントを評価しています。この評価は私見であり、しかも限定的な用途に即しているかを基準にしています。
決してフォントそのものへの評価ではないこと。またフォントの好みは人それぞれ異なることをご理解ください。
各フォントごとにSSと配布先へのリンクを記載しているので、各々好みに合ったフォントをお選びください。


2.一般的な等幅フォントが向かないSublime Text


「等幅フォントが望ましい」と条件をあげておきながら、何だこのタイトルはって感じですが、百聞は一見に如かず。コーディング向けとして有名な等幅フォントを適用した例をいくつかご覧ください。
即ダウンロードしたい方向けに、フォント名にリンクを貼ってあります


Bizin Gothic


Cica


SOROEMONO


おわかりいただけただろうか。みっちりアゲイン
一般的な等幅フォントは半角1:全角2の割合ですが、これだとどうにも詰まって見えます。特にタグとタグの間。山括弧(アングルブラケット)の間は少しでいいからスペースを空けたい!
またプログラムを組むときは気にならないんですが、HTMLやXMLを読むときはアングルブラケットが尖った形状だと、山括弧の内側の文字が綺麗におさまらない。特にliタグやpタグは上下にはみ出しがちです。これがどうにも据わりが悪い。カーニングが広いと違和感が薄れるんですが。

そんなに気になる? と首をひねった方は、次の2例をご覧ください。
画像左側が半角1:全角2 幅、画像右側が半角3:全角5 幅。同じフォントでの比較です。フォントサイズは16pt共通。
画像をクリックすると拡大表示できます。


左はPlemolJP、右はPlemolJP35


左はMoralerspace Neon HW、右はMoralerspace Neon


タグとタグの間はそれほど大差はありませんが、英単語のカーニングに歴然とした差があります。自分は右の方が圧倒的に好み。
半角3:全角5 の等幅フォントは、フォント開発者のたわら様が他にも色々公開されています。


NOTONOTO35

こちらもたわら様作の半角3:全角5 の等幅フォント


UDEV Gothic35

同上


3.日本語を切れば選択肢は広がる


英数字だけのフォントなら、フォントの太さや斜体に加えてカーニングの広さまで選択できるフォントもあります。たとえばこちらのInconsolata。
フォントの装飾も少なく理想的。


Inconsolata

カーニングは〝やや広い〟フォントの太さは〝中太〟


なお2026年2月の段階では、AIは「Sublime Textで複数のフォントを指定可能だよ」と答えますが、これはSublime Textのフォーラムに上がった要望と、CSSのfont-family指定が混線して勘違いしているようです。
概要元のサイトをチェックしてもそれらしい記述はなし。フォント名を調べた上で下記のように設定もしてみましたが、反映されませんでした。

期待させんなよぉ

"font_face": [ "Consolas","游明朝"], ←正しい書式はたぶんこっち
"font_face": "Consolas, Meiryo", ←こちらは最初にAIが答えた方法

どちらの方法もSublime Textに反映されません


4.それでファイナルアンサーは?


\ 自分でフォントを合成した /

実はしばらくNOTONOTO35を使っていたんですが、やはりアングルブラケットの前後がしっくりこない。特にpタグのはみ出し感が半端ない。
初期フォントのConsolasはアングルブラケットが小さめなので、なおさら違和感を感じるのでしょう。

左がConsolas(Windows版Sublime Text規定フォント)、右がNOTONOTO35

推測ですが、プログラム向けのフォントは全角の山括弧と半角のアングルブラケットの見分けがつきやすいように、アングルブラケットが尖り気味なのではなかろうかと。

しかしSublime TextのようなエディタでHTMLを開いた場合、全角の山括弧とアングルブラケットを混同することはまずありません。タグの色づけ機能があるエディタなら、配色がおかしくなるので一発で見分けがつきます。
そうなると見た目のバランスを優先してもいいのかなと。


というわけでInconsolataと源柔ゴシックを合成し、なおかつアングルブラケットを小さめに改造。どうせ自作するならということで、何パターンか作って比較もしました。

3:5で作成した等幅フォント。タグの属性が間延びして見えるのが気になる


1:2で作成した等幅フォント。3:5版を見た後だとみっちり


3:5で作成した等幅フォントの半角文字を拡大し、カーニングを微調整。現在はこれを使用中


ちなみに「HTMLのソース閲覧におすすめのフォント」でググると、Webフォントのおすすめばっかでてきます。違うんだ。ホームページに使うフォントじゃなくて、ソース向きのフォントが知りたいんだ。

いいなと思ったら応援しよう!