見出し画像

フォントを作ろう!

嘘じゃないよフォントだよ

フォント制作しましょか!
所謂「タイポグラフィ」ではありません。パソコンにインストールされている、標準書体の何万字も含まれた「フォントファイル」を作ろうというものです。

実は仕事柄、日頃からベクターデータを扱っていまして。
最も頻繁なのがSVGドキュメントなわけですが、これ、ご存知でしょうか。

ここでベクターと言っているのは、線とそれが構成する面、更にその集合としての画像のことですが、簡単に言えば Adobe の Illustrator を使う人にはお馴染みの「パス」のことです。
アイコン等小さなグラフィック、写真やそれに含まれる要素の切り抜きなどでもよく使われますね。

私はフリーフォントから文字のアウトライン(輪郭)を弄って好みのウェイト感(太さ)にしたりということも日常的にやっているので、いっちょフォントセットを作ってみようじゃないかと思い立ったというわけ。

今、ヒマだからね! 実現可能性の高いコトをやってみよう。 #StayHome


最初に考えるべきこと

いきなり日本語は文字数が多過ぎて無理ゲなので!
とっかかりはアルファベット。プラス数字ってとこでしょうか。

で、大事なことが。
書体をデザインするのは手元でいくらでもできるけど、最終的に TrueType や OpenType などのフォントファイルとしてまとめるためにはどうするのだろう?

Unicode などの文字コードと文字デザインが対応したものの集合がフォントファイルなわけですが、これを自力でやるわけにはいかない。 笑
あまりにもわからなさすぎる。

そこで検索。
今は一般でも手の届く統合ソフトが色々あるようですね。FontLab とか Glyphs とか…

貧者のフォント制作プロジェクトとしては、とりあえずフリーソフトでいきたい。
また、今の自分の作業環境が古く、今時のソフトを導入しようにもOSへの対応が無い (^▽^;)
なので FontForge 一択…

画像4

ちょっとしか弄ってないけど、FontForge の上でパスを編集するのは骨が折れる。
さてどうする。
うん? SVGファイルからパスをインポートできる? いいね!

私が普段使っているのは Inkscape なのですが、こちらでとりあえず一文字だけ作って「A.svg」として保存。
おおデータが入って来る! けどちょっと小さい。
じゃ拡大ツール、っと…    落ちた!

というわけで… (^▽^;)

編集のためのツールを使おうとすると FontForge は呆気なく落ちる。
うん無理。この方法はダメだ!


Webツールを見つける

今は本当に便利というかですね、凄い人たちがいまして。
Webブラウザの上でフォントファイルを出力するところまでやってくれるサービスがあります。

今回使ってみたのは「Calligraphr(https://www.calligraphr.com/en/)」。

画像1


何はともあれ、やってみる。
メールアドレスで登録して、フリーの機能で、手始めにアルファベットと数字のみでフォントを作ります。

わかりやすかったのは、テンプレートをダウンロードし、そこにデザインした文字を乗せ(または直接手書きし)、その後アップロードすることでフォントファイルを出力してくれるということ。

私の instagram に、ちょこっと進捗を載せましたが
ざっくりざくざく文字を作って、テンプレートに貼付けて。
アップロードの後、サイトでビルド。
TrueType と OpenType 双方のフォーマットで作ってくれます。

画像3



早速パソコンにインストール。
お見事! ちゃんとできてますよ!

画像2


各文字に固有の情報、ベースラインとか幅・サイドベアリングとか、そういうものの細かな設定ができず、また効かないので、パッと見は色々とダメダメですが、文字をデザインして、テンプレートを使ってサイトで出力、というワークフロー全体は「いける!」感触を得ました。


作業を終え、雑感

よく見てみると、文字のアウトラインが崩れています。
そう、これはパスを読み取っているのではなく、あくまで画像としてトレースされたものなんでしょうね。
サーバー側でおそらく Potrace のようなツールでアウトラインを抽出しているのでは。

現実的な使い方としては、文字通りの手書き風フォントが欲しいといった用途かな。
それならば、十分に使える。文字数は少ないながら日本語もいけるようなので。


さて。

自分の使い方としては、まだ十分ではない (^▽^;)
精密なパスを再現するためにどうするか。
ソフトと環境、何かしらのアップグレードは必要かもしれません。

将来、まかり間違って私の自作のフォントが欲しい人が出てきたら、SVGのまま配布しちゃうという手も無くはありませんが 笑


このフォント制作シリーズもいずれ続編が書かれると思うので、そちらで随時報告していきたいと思います。ではまた!


この記事が気に入ったらサポートをしてみませんか?