Help us understand the problem. What is going on with this article?

【文字幅 半角3:全角5 も追加】Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話

(2020/06/02) Nerd Fonts を追加で合成した v2.0.0 をリリースしました。


誰もが知る(?)プログラミングフォントこと Ricty にインスパイアされ、Ricty のように英文フォントと和文フォントを合成したプログラミングフォントを作りました。

その名も、プログラミングフォント「白源 (はくげん/HackGen)」です!

白源 (はくげん/HackGen) 通常版
image.png
白源 半角3:全角5 版
image.png

生成元にはプログラミング向け英文フォント Hack と、Adobe 製作の源ノ角ゴシックに丸みを付けた派生フォント 源柔ゴシック を使用させていただきました。

白源の生成元である Hack、及び源柔ゴシックには、いずれも SIL Open Font License Version 1.1 という大らかなライセンスが適用されているため、改変及び配布が自由となっています。したがって、白源の生成済みフォントファイル (ttf ファイル) は GitHub からダウンロードして、すぐにご利用いただけます

「白源 (はくげん/HackGen)」の特徴

プログラミングフォント「白源 (はくげん/HackGen)」には以下のような特徴があります。

  • 文字幅 半角1:全角2 の正統派な等幅フォント (文字幅 半角3:全角5 バージョンも同梱)
  • Hack 由来の読みやすく、しっとりとした印象の英字
  • 源柔ゴシック由来の引き締まりつつ、丸ゴシックの風合いのあるカナ文字・漢字 (第一~第四水準漢字まで対応)
  • 全角スペースの可視化、パイプ記号 | の破断線化 (Ricty Discord インスパイア)
  • 英字部分にはヒンティングを付与しているため、Windows 上の VSCode など Electron 製のエディターでもしっかりとアンチエイリアスが掛かる (Ricty だと綺麗にアンチエイリアスが掛からず、ガビガビした表示になる)
  • Powerline 記号の表示
  • その他、判読性の向上
    • 半濁音「ぱぴぷぺぽパピプペポ」の丸を大きくした
    • 長音記号 と漢数字の1 にヒゲを付けた

また、和文対応のプログラミングフォントは、テキストエディタで文章作成をする際にも違和感無く使えることが大事だと考えています。そのため、矢印 (←→↑↓) や■などの文章の修飾に使われる記号、その他諸々は源柔ゴシックベースの全角にしています

フォントファミリーの種類

後述のダウンロードリンクから入手できるリリースファイルには、以下のフォントファミリーが含まれます。

※いずれのフォントにも Powerline 記号が含まれています。

フォントファミリー 説明
HackGen 文字幅比率「半角1:全角2」の通常版の白源。主にASCIIコードに載っている英数字記号のみに Hack ベースの字体を使い、その他の記号類やかな文字・漢字を源柔ベースにしている
HackGen Console Hack ベースの字体を除外せずに全て適用したフォントファミリー。Hack には記号類も豊富に収録されているため、多くの記号が半角で表示される。コンソールでの利用や記号類は全て半角で表示したい人にオススメ
HackGen35 通常版の白源の文字幅比率を「半角3:全角5」にしたフォントファミリー。英数字が通常版の白源よりも大きく表示される。オリジナルの Hack の字幅が好きな人にオススメ
HackGen35 Console HackGen Console の文字幅比率を 半角3:全角5 にしたフォントファミリー

※以下のフォントファミリーには、Nerd Fonts を追加で合成しており、Font Awesome を初めとした多くのアイコンフォントが表示できるようになります。

フォントファミリー 説明
HackGenNerd HackGen に Nerd Fonts を追加しているフォントファミリー
HackGenNerd Console HackGen Console に Nerd Fonts を追加しているフォントファミリー
HackGen35Nerd HackGen35 に Nerd Fonts を追加しているフォントファミリー
HackGen35Nerd Console HackGen35 Console に Nerd Fonts を追加しているフォントファミリー

ダウンロード

この後の章は退屈だと思うので、ひとまずこのあたりでダウンロードリンクを貼っておきます。ぜひお試しください!

HackGen - GitHub

※ページ内の「HackGen_v<バージョン>.zip」という名称の ZIP ファイルをダウンロードしてご使用ください。
2019-05-21_15h52_02.png

Homebrew でのインストール

ユーザさんのご厚意 により、 Mac で Homebrew を利用しているユーザであれば、そちらからもインストールできるようになりました。 (Thx tsukaby-san!!)
以下コマンドでインストールできます。

$ brew tap homebrew/cask-fonts
$ brew cask install font-hackgen

謝辞

Hack を提供してくださっている作者様、源柔ゴシックを提供してくださっている作者様、並びに源柔ゴシックの生成元である源ノ角ゴシックと M+ OUTLINE FONTS の作者様へ、この場を借りて深くお礼申し上げます。

「白源」作成までの経緯

Ricty は美しい

プログラミングフォントについて調べると、必ずと言っていいほど出てくるのが 「Ricty」という和文対応のプログラミングフォントです。

和文対応のプログラミングフォントはいくつか公開されていますが、その中でも Ricty は抜きん出て視認性に優れ、さらに英文と和文の字体のバランスがとても良く、合成されたフォント同士が高度に調和されている印象を受けました。

それに魅了された僕は、いくつかのプログラミングフォントを試しては結局 Ricty に戻る…を繰り返していたのでした。

以下は普段使用している、Ricty の視認性向上版となる Ricty Discord です。

Ricty Discord
Ricty_Discord.png

ちなみに Ricty は、英文のラテン文字には Consolas を意識して作られたという Inconsolata、和文の文字には視認性の良い Migu 1M というフォントが表示されるように合成されたフォントですが、Migu 1M のライセンスの影響で合成後のフォントファイルの配布は行われておらず、合成スクリプトのみを公開する形が取られています。 (合成スクリプトの使い方は割愛します)

Ricty のデメリット

とにかく美しい Ricty ですが、フォント比較系のブログ記事で否定的な意見を見かけることもあります。否定意見では以下が多い気がします。

  • Inconsolata の字体が細すぎて見づらい、表示がかすれる
  • Migu 1M (M+ OUTLINE FONTS) の丸みを帯びた字体が好みではない
  • フォント生成がめんどくさい

そこで Ricty と同等の視認性を持ち、字体はもっと太く、そして和文は M+ 系のフォント以外で、さらにライセンス問題もクリアしてそのまま配布できるフォントは作れないだろうかと考えました。

M+ 系フォントはなぜか Electron 製エディターの DirectWrite との相性が悪い

もう一つ、Windows ユーザーの自分には許し難いデメリットがあったのでした。それは、Windows 上の Electron 製のテキストエディターではアンチエイリアスがうまく掛かってくれないことです。(きっと Mac なら綺麗なんだろうな…使ったことないですけど。)

Ricty Discord 白源 (はくげん/HackGen)
Ricty_Discord.png HackGen.png

普段僕は、VSCodeInkdrop といった、エディター部が Electron 製のアプリを利用しています。

もちろんそれらのアプリ上での表示は、上記のようにガタガタなものになるのでした。悲しみ。

フォント選定

フォントの選定は、前述の通り Hack と源柔ゴシックにしました。以下、簡単にご紹介です。

しっかりとした太さを持った「Hack」

Hack は SIL ライセンスで提供されている素敵フォントです。太めで見やすい字体を見た瞬間、「これだ!!」と思って選定しました。

このフォントは、プログラミングフォント「Cica」の元になっているのを知っている方もいるのではないでしょうか。

Aa-mockup-2.png
公式サイト

フリーライセンスの和文フォントの定番「源ノ角ゴシック」の派生フォント「源柔ゴシック」

フリーライセンスで和文フォント、と考えた時点で源ノ角ゴシック系だと決めていました。

いくつか試した中で、丸ゴシック風の源柔ゴシックの L タイプ(丸みが少ない版)が Hack の雰囲気に合っていると感じたため、採用させていただきました。

ちなみに源ノ角ゴシックの派生フォントでは最も有名なのではなかろうかという源真ゴシックは、前述の DirectWrite 問題が発生していました。源柔ゴシックと同じ作者の方のフォントなので、ちょっと不思議です。

genjyuu_catch.png
公式サイト

いざ、「白源」を生成

詳細な生成手順やノウハウは、また別の記事にまとめたいと思いますが、流れとしては以下のような感じです。

なお、合成に使ったツールはお馴染みの FontForge です。また、合成後のメタデータ編集には fonttools (ttx コマンド) を利用しました。

  • Hack の高さを源柔ゴシックに合わせ、さらに幅を狭める (X 幅:90%, Y 幅:94%)
  • 破断線 (brokenbar) をパイプ記号 (verticalbar) にコピーして Y 幅:114% に変形
  • 源柔ゴシックの幅を Hack に合わせて広げる
  • 編集した Hack と源柔ゴシックを合成
  • フォントの高さ等のメタデータが保存されている OS/2 テーブル、post テーブルを修正 (これをしないと等幅フォントとして OS に認識されなかったり、斜体や太字としてフォント登録がされなかったりする)

(後記) ヒンティングを付与

英字の生成元である Hack と白源を見比べると、どうも白源の英数字は少しぼやけたような、滲んだような表示になっている気がしていました。

調べてみたところ、Hack では ttfautohint というツールでヒンティング情報を付与しているのですが、Hack を fontforge を使って白源へ合成する際にヒンティング情報が外れてしまうことが原因のようでした。

そのため、Hack とほぼ同等の ttfautohint パラメータを使い、ヒンティング情報を"Hack 由来の部分だけ"に付与しました。 日本語部分にも掛けると漢字の表示品質が著しく落ちるため、英字部分にだけ掛けるようにしました。(情報が無かったため大変でした……)

以下が、ヒンティングの有無の比較画像です。「=」記号が特に効果の出方が顕著で、ヒンティング無しだとぼやけて上下平行に並んだ線が触れそうになっているのが、ヒンティングが効いてしっかりと分離しているのが見て取れます。

ヒンティング無し ヒンティング有り
2019-06-03_05h14_27.png 2019-06-03_05h15_09.png

今後の課題

今回は Ricty の生成スクリプトをかなり踏襲しているため、その範囲で対応できない部分 (主に Hack の修正) を手動で行っています。将来的には、そのあたりも全てスクリプトで自動生成できるようにしたいところです。

⇒ひとまず修正を全てスクリプトで行えるようにはなりました。次はこれをベースに Python スクリプト化を目指します。

(2019/08/09) 若年者ものづくり競技大会 (技能五輪ユース大会) の指定フォントになりました!

第14回 若年者ものづくり競技大会 (技能五輪ユース大会) 業務用ITソフトウェア・ソリューションズの部 の競技環境プログラミングフォントに指定されました!

Screenshot_2019-08-09-08-12-21-841_com.adobe.reader.png

参考

フォント作成にあたり、以下の記事が大いに参考になりました。
ありがとうございました。

tawara_
インフラ運用上がりの開発者。追求の果てがない開発という仕事に恋しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした