自分の手描き文字でフォントを作ってみた話。
この記事は、Fun Advent Calendar 21日目の記事です。
他の人の記事もぜひご覧ください。
どうも、情報デザインコース3年のmkod（ミコド）です。
この記事では自分の手書き文字でフォントを作ってみた話をしようと思います。
作った理由
そもそも、どうしてこんなものを作ろうと思ったのかは、去年のアドカレのPart2をご覧ください（自己紹介もこちらで）。
簡潔に言うと…
高校生のコロナ禍で「となりのヘルベチカ」という本を読み様々なフォントを知る
その後、タイポグラフィーや様々なフォントがあると知り、沼にハマる。
大学入学後、フォントを制作できるフリーアプリがあると知り、フォント制作を始める。→が、当時買った生協推奨パソコン（Laptop GO）ではダメ…（∵フォントが出力できない）
PCをMacBookに変えると、フォント出力もできるようになる。
→「自分の手書きの文字をフォントしたら、おもしろいんじゃね？」
→フォントを作り始める
実 際 に や っ て み た
開発環境
PC（13インチ M1 MacBook Pro）
制作アプリ FontForge Illustrator
試し書き用アプリ Page（要するにWord）,Illustrator
やりかた
①フォントの基礎方針を考える
まずはフォントの基本方針を考えます
自分の書く書体的にはサンセリフ体とゴシック体みたいな文字を書くので「欧文→サンセリフ体」「和文→ゴシック体」にしました
（「ゴシック体」「明朝体」から、さらに細かな分類がされているそうです。気になる人は調べてみてね😘）
②文字の形を精査する
次に文字の形状を一つ一つ精査しました。
精査するものとして…
起筆（書き始め）と収筆（書き終わり）形状はどのような形式にするか
大文字と小文字の大きさの比率
それぞれの文字の縦横のサイズ etc…
色々考えてみた結果、こんな用紙を作って自分の書く文字をよーーく観察しました
FontForge落とし込む
フォントの形状をある程度把握したら、FontForgeを経由してフォントをとして落とし込みます
（イラレでお馴染みベジェ曲線で編集していきます）
（補足） ちなみに去年のアドカレでは…
去年のアドカレの時点では記号・数字など33文字が完成していました。
その後…
その後も文字を手書き書いてはFontforgeで編集を地道に繰り返し、ついに６月にはアルファベットの大文字が完成。フォントを出力してWordなどへ打ち込むことにも成功しました。
可読性を高める
小文字を作る
大文字が完成して、次は小文字の制作
大文字と同じく手書きで書いてFontForgeで編集でも良かったのですが、可読性を上げるためにこのサイトを参考に、文字を制作しました。
上のサイトによると…
これ（フォントの基礎）に対するよく知られた有用な手法は、最初に「o」と「n」の文字をデザインし、形、スペース、バランスの重要な要素を確定させてから、それらの要素を組み合わせて他の文字を形成することです。小文字の「o」と「n」をデザインすることで、必要な他のすべての文字を下支えする根本的な形と構造の幾つかが得られます。
どうやら「n」と「o」が文字を作る上での基礎らしく、これを使い回して微調整することで他の文字も完成できるそう。さらに「videospan（もしくは「adhesion」）の単語を完成させて、残りの文字も完成させるそうです。（大文字は「H」と「O」を最初に作るそう）
加えて「オーバーシュート」とか「Xハイト」「キャピタルハイト」や縦横斜めの線に関する錯覚など色々な用語や技術があり、これらを無視して制作していたんだなと実感…
ここに出た話はまだ序の口なので詳しい人はここ押してね😗
フォント制作の技術もあり小文字の制作は大文字の制作よりも早く作ることができました↓
これまで書いた文字のブラッシュアップ
小文字完成後はこれまでフォントにした文字（小文字・数字）をブラッシュアップ。「キャップハイト」や線の錯覚の影響など念頭におきながら修正をしました。（技術的なものが欠けてる以前にこの時点で大文字完成から半年以上放置しているからね。）
（赤枠がリニューアル前 青の塗りつぶしがリニューアル後）
印刷して目視でおかしいところを確認
ブラッシュアップが完了したら、このフォントを使った作品を紙に印刷して、目視でおかしい部分を確認します。
フォント作るだけなら目視で作らなくてもいいけど、僕はこのフォントを将来的に色々な場面で実用したいからね
ダミーテキストとカーニングをつかう
じゃあどのように確認して調整するのか、
それは「ダミーテキスト」と「カーニング機能」です
「ダミーテキスト」とは、意味のない文章群のことです。（和文でいうと「あああああああ…」という文字列で表したり、「あのイーハトーヴォのすきとおった風…」とか「Wind●wsでコンピュータの世界が…」のやつです）
欧文だと「Lorem Ipsum」が有名です。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
この文をコピペして、文字の間隔などを目視で確認します。
このほかにも、大文字で小文字の太さなど様々なことを調整していきます。ここで使うのがカーニングという機能です
この機能で1文字1文字の間隔を調整します。
完成（というかもう投稿日から過ぎているのでここで一区切り）！
こ こ ま で み て く れ た み な さ ま に
ここまでみてくれたみなさまに感謝の気持ちを込めて、現在入力できる範囲の「mkodGothic」フォントをプレゼントします！
ぜひ使ってみてね！
加えて使ってみた感想をSNSなどで投稿してもらえればうれしいです。
私もこのフォントをみなさまに「使ってもらって、学んでいこう」と思います（あれ、このプロジェクト名どこかでみたことあるような…）
※ダウンロードする際の注意点
ダウンロードやフォントのインストールでのシステムの故障などの損害については責任を負いかねますので、自己責任でDLおよびインストールをお願いします！
今後の予定
日本人ならやっぱり
今後、「mkodGothic」はさらに制作を続けていく予定です。
まだ、入力していない記号やアルファベットが終わったら、日本語も取りかかろうとしています！
NT・LTにも積極的に参加したい！
実は去年5月函館で行われてたNT函館で、モデリングのアルバイトでお世話になっている方が出展していたので、ちらっと訪問したことがあるのですが、未来大生も積極的に参加していることをあり、参加したいという意欲が沸きました。
「手書き文字でフォントを作ってみた」という武器を持つこととができ、来年も5月にまちづくりセンターで行われることがわかったので、参加してみたい…
あと、LT会にも参加して交流してみたい…
えっ、「来年お前4年だから、卒研で忙しくなってそんなことできないんじゃないの」だって？
終 ／制作・著作 mkod