ycaxenフォントを実装した話

この記事は、筆兵無傾Advent Calendar 2023の2日目の記事です。

どうも、お久しぶりです。悠里思想とsvgの操作技術を身に着けたことで全知全能度がより高まりつつあるmelovilijuです。
4月に最初の自己紹介記事を投稿してから間が大きく開いてしまいましたが、12月はAdvent Calendar、つまりは締切駆動でドキュメントを生やす絶好の機会ということで、いくつか記事を投稿する予定でいます。

さて皆様は、東島通商語という人工言語を御存じでしょうか。御存じの方にはいつも大変お世話になっております、そうでない方には本日よりお見知りおきいただきたく思います。今回はその東島通商語のフォントであるycaxenフォントを作成したことについてのお話です。

Points!

この記事を読むと

• 東島通商語のことがわかる
• ycaxenフォントの特徴がわかる
• フォント作りの流れがわかるかもしれない

東島通商語とは？

簡単に東島通商語とその背景について説明すると、ファイクレオネという架空世界において、エルフ熱という疫病の流行と時を同じくして起こったモンスターの発生という災害から避難する形で人類が一ヶ所に集まりました。東島通商語というのは、そうして逃げ延びた人々が話していた数々の言語：リパライン語、ヴェフィス語、リナエスト語、アイル語、パイグ語、タカン語などがまじりあって形成されたクレオール言語です。

東島通商語は、2022年夏には日本机戦連盟サイトの標準ルールの翻訳が完了、2022年秋には5枚のポスターとドキュメンタリー番組のオープニングが制作され、さらに2023年春には20ページもある同人誌が刊行されるなど、悠里において最も勢いのある言語といっても過言ではないほどの成長を見せていますが、2023年12月には、ついに東島通商語の文字でフォントコンペが開催されることになりました。

↑あまりに出来がよく73秒と手頃なので公開されて以降さまざまなところで我々の創作スタンスを端的に説明するのにつかわれるようになりました
(カズレーザーと蓮見翔の番組でも取り上げられて全国放送されました)


『脳内ワンダーランド』に出演している様子(BS朝日『脳内ワンダーランド』番組公式HPより引用)




さて、東島通商語とその使用例について説明したところで、今回の主役であるフォントの話に移ります。

ycaxenフォント

ycaxenは、東島通商語に必要な18字に外来語用の3字を加えた21の基本グリフと0から9の燐数字、および約物6種の計37グリフを備えた東島通商語専用フォントです。

すっきりとした細身の輪郭を持ち、小ポイントでも大ポイントでも見やすさを保つことが特徴です。本文から見出しにまで幅広く利用でき、ウェイトとして現在Lightが存在し、将来的にはRegularやHeavyの追加も予定しています。

フォントを使いたい方はこちら

ycaxenフォントができるまで

さて、フォントの用途と特徴を知っていただいたところで、いよいよフォントづくりの工程を見ていきましょう。ちなみに今回PCを新調してすぐにフォント制作に取り掛かったため既存の環境を仮定しない、かなりRTAに近い動きをしています。GitHubで公開することを考えず、ただ作りたいだけなら2のステップは飛ばせます。

準備

1. PCのセットアップ
   アカウントを作りログインできるようにしたPCにまずはVSCode, Inkscape, FontForgeをインストールします。そしてWSLを使えるようにしてWSL用のOSとrootのセットアップを行います。(実はPowerShellがデフォルトでgitを使えるのでWSLは必要ない)

2. sshをGitHubに通す
   頑張りましょう。cf. GitHub SSH接続設定 ed25519
   コマンドを打つだけなんですが、私はうっかりssh key-genをroot権限で実行してしまったためしばらく.sshフォルダがrootアクセスのみになっているのに気づかず90分くらい無駄にしました。

3. テンプレートのsvgファイルを作る
   文字の高さ(x-heightといわれるもの)を決め、アセンダーとディセンダーの位置を決めます。これをもとにグリフを作っていきます。
   
   この際、必ずオブジェクトではなくパスに変換してから保存するようにしましょう(この後FontForgeで読み込むときにいろいろ不具合が起こるので)。
   例えば上の画像では、左の縦棒を長方形で作っていますが、そのあとパスに変換することで四隅にノードが打たれているのがわかります。

4. FontForgeでコードポイントにグリフを当ててはめていく
   スロットをクリックしてウィンドウを開き、ctrl+shift+Iで対応するsvgファイルを一つ一つ紐づけていきます。fantasticonを使うことで一括で生成することができるそうですが、fantasticonはもともとこういったがっつりした文字フォントを作るツールではなく面倒事の方が多いらしいので、おとなしく手作業で当てはめていきましょう。
   
   当てはめ終わったら、ctrl+Kでカーニング(グリフの左右のスペーシング)を調整し、ctrl+shift+Gでいよいよフォントファイルを生成します。エラーは無視してok。テストするときはブラウザでポイント数や配置を楽に操作したいので、ブラウザ用にwoffで生成しましょう。
   注意: FontForgeはWSLにアクセスができないようなので、作業はwindows側で行いましょう。

5. ひたすら修正する
   出来上がったフォントのデザインを見て、心の底から問題ないと感じられるまで違和感のある部分を取り除きます。グリフのデザインに問題があるときと、カーニングなどによる環境の問題があるとき、それに加えて人間の錯視が問題になるときがあるため、最も手間がかかる場所です。
   

6. 完成！
   完成したら、ttfやotfなど、自分の使用したいフォントファイルとwoffファイルを合わせて出力して、GitHubに公開しましょう。README.mdにフォントを使ってパングラムを書いている画像やwoffファイルへのアクセスリンクを、可能ならフォントを使って好きな文を入れてテストできるようなページを提供してあげると親切です。
   

ヒトの錯視

錯視というのは本当に厄介な代物です。例えば、円と、その直径と同じ長さの辺を持つ四角が並んでいれば、ヒトは円の方を小さいと感じます(面積の差を大きさとしてとらえてしまうため)。同様に丸っこいグリフは、角ばったグリフよりも左右のスペースが空いて見えます。こうした錯視をいい感じにカバーするにはどういう錯視があるかを把握する必要があります。

というわけで、私がこのフォントを調整するにあたって参考にしたサイトの一部を以下に挙げておきます。ここにない重要そうな錯視に言及されているサイトがあったらコメントで教えてくださると私を含む人々が幸福になります。

• 自分の目を信じよう -フォントデザインの錯視について
• タイポグラフィーと錯視調整の話|東京工業大学デジタル創作同好会traP
• Glyphsでフォントを作ろう 第11回

これらの情報が皆さんがグリフを作成したりデザインを調整する際の手助けになればと思います。

それでは、良いフォントライフを！

追伸：東島通商語フォントコンペはまだまだ参加受付中！

1. まずはコンペを開催している日本机戦連盟Discordに参加しよう！
2. #イベント立案チャンネルにGitHubレポジトリのリンクを貼り付けて参加の意思を表明しよう！
3. フォント見本ページを追加するPull Requestが飛んでくるのでそれをmergeしよう！
4. mergeしたら参加の本登録が完了！

レポジトリに#pmcf-fontタグが付いているとこちらから探しに行くこともできます！この機会にぜひご参加ください！

woffファイルでの公開と改変の自由な許可を前提条件とします。