手書きフォント制作記

 (kokorobot.ca)
3 ポイント 投稿者 GN⁺ 2023-11-28 | 1件のコメント | WhatsAppで共有
  • 漫画 hakum の手書きテキストはページごとにサイズや可読性がぶれやすかったため、既存フォントの代わりに自分の筆跡を TTFフォント にすることにした
  • ペンタブレットで書いたデジタル筆跡よりも、紙に書いた文字をスキャンした2回目の試みのほうが、より自然で有機的に見えた
  • 制作範囲は A-Z、a-z、数字 0-9、基本的な句読点に限定され、太字・イタリック・合字のような拡張機能は目標から外された
  • Gimp でスキャン画像を整え、PNG に分割したあと、FontForge でグリフの輪郭、左右の余白、カーニングを調整する流れで進められた
  • Autotrace や書き出しの過程では、missing points at extrema、self intersecting といった検証上の問題が起こりうるため、手書きフォントは後処理を多く必要とする

手書きをフォントに変えた理由

  • 漫画 hakum のテキストは、以前はペンタブレットで直接デジタル作成していた
  • 仕上がりは悪くなかったが、1ページの中でも文字サイズが大きくなったり小さくなったりして、可読性 がぶれることがあった
  • 既存フォントは使いたくなかったため、自分の手書きをもとにフォントを作ることにした
  • 目標はWeb公開用の TTFフォント で、限られた文字セットのみを含めた
    • 太字とイタリックは作らない
    • フォント制作も FontForge の使用も初めてだったので、もっと良い方法があるかもしれない

2回の試みと書体の基本用語

  • 1つ目のフォントは、ペンタブレットで書いた デジタル手書き文字 をもとに作った
  • 2つ目のフォントは、紙に書いた文字をスキャンした画像から作成し、紙の上の文字は精密さが低いぶん、より有機的で自然に見えた
  • フォント作りを通じて書体構造の用語を学び、各要素の機能を知ることが、より良いデザインの選択や機能的なフォント制作に役立った
    • Ascender: 小文字で x-height より上に伸びる部分
    • Baseline: ほとんどの文字が乗り、descender が下へ伸びる基準線
    • Cap Height: ほとんどの大文字の高さを示す線
    • Descender: p や q のように baseline より下へ伸びる部分
    • X-Height: 小文字の baseline と mean line の間の距離

スキャン画像の整理と Gimp での調整

  • 制作対象は、大文字 A-Z、小文字 a-z、数字 0-9、コンマ・感嘆符・疑問符などの 基本的な句読点 だった
  • 最初はスケッチブックに baseline、cap height、x-height、descender のガイド線を鉛筆で引き、文字を書いた
  • ガイド線の間に文字を書くと硬くなりすぎたため、その後は "The quick brown dog jumps over the lazy fox" という文を大文字・小文字で何度も書いた
    • この文には a-z に必要なすべての文字が含まれている
    • 文として書くと文字を意識しすぎず、より良い形になった
    • グリッドの上で描くと制約ばかり気になってしまう
  • いちばんうまく書けた文を選んでフォント制作に使い、一部にはグリッド上で描いた文字も活用した
  • このやり方のため、後で各文字の cap-height、x-height、descender をデジタル上で揃える必要があった
  • スキャンした文字画像には、Gimp で Color > Threshold を適用してグレーを除去した
  • 鉛筆と紙の性質、そしてグリッドを使わなかったこともあり、Gimp の鉛筆ツールで文字の欠点を修正した
    • Tool Options では dynamics をすべてオフにして、きれいな線を得た
  • 整えた文字は新しい Gimp 文書にコピーして集め、文書サイズは最も大きく幅広い文字である大文字 M を収められるように設定した
  • この段階で、線の太さがばらつきすぎていないかを確認した
  • すべての文字をそれぞれ PNG としてプロジェクトフォルダに書き出した

FontForge でグリフを作る

  • FontForge は Linux で動作し、周囲の人にも勧められていたため選んだが、使用感は良かった
  • 新しいプロジェクトを作成すると Font View Window が開き、フォントのすべてのグリフスロットが表形式で表示される
  • Element > Font Info でフォント情報を入力し、PS Names の下にフォント名を追加する
  • TTF として書き出すには、同じウィンドウの General で Em size を 1024 に変更する
    • TrueType フォントの UPM は慣例的に 1024 や 2048 のような 2 の累乗が使われる
    • OTF フォントでは要件が異なる
    • 昔の金属活字では、各文字は高さを揃えるため固有のスペースコンテナに収められ、この活字片の高さが「em」と呼ばれた
  • Font View でグリフをダブルクリックすると Character View が開く
    • ここでグリフを描いたり編集したりする
    • タブ式インターフェースで1つずつ見たり、用意したテキストファイルを通して単語を並べて確認したりできる
  • 左下のレイヤー一覧で Back レイヤーを選び、File > Import でその文字の PNG を読み込む
  • その後、次の2通りのいずれかでグリフの輪郭を作る
    • 手作業で輪郭を描く
    • Fore レイヤーを選び、Select > Autotrace で自動的に輪郭を生成する
  • Autotrace は背景画像を参照して、制御点とベジエ曲線を含む輪郭を作成するが、点が多すぎたり extrema の欠落が起きたりすることがある
  • 閉じた形ができると、そのグリフは他のウィンドウにも表示される

左右余白とプレビュー

  • グリフごとに左側と右側の side bearing を調整し、最終的なグリフ幅を決める
  • すべてのグリフを自動的に中央寄せにするには Metrics > Auto Width を使う
  • すべてのグリフを幅の中で中央に置くには Metrics > Center In Width を使う
  • 輪郭を修正するときは、参照レイヤーをオフにすると役立つ
  • グリフをやり直したい場合は、Font Window で対象のグリフを選び、Edit > Clear を使う
  • 参照レイヤーだけを消したい場合は Edit > Clear Background を使う
  • Character View の作業キャンバス上にあるテキスト欄で、現在の文字の後ろに単語や任意の文字を入力すると、文字が並んだときの見え方をプレビューできる
  • この作業はすべてのグリフに対して繰り返す必要があり、特に Space グリフの左右 side bearing を調整しないと、単語間の空白が広すぎてしまう

カーニング設定

  • カーニング は、文字が読みやすく見えるように文字間隔を調整する工程である
  • Font Window で Element > Font Info に進み、Lookups の GPOS タブで Add Lookup を押す
  • Type のドロップダウンで Pair Position (Kerning) を選ぶ
  • Feature 列で New の横の矢印を押し、Kern Horizontal Kerning を選んで確定する
  • 新しく作った GPOS 項目を選び、Add Subtable を押して、既定の名前のまま確定する
  • カーニング対象の文字は、両側の表でそれぞれドラッグして選択する
    • 大文字と小文字の両方を選ぶ必要がある
    • 1つの表で2つの集合を同時に選ぶには Shift を使う
  • pairings をクリックすると、グリフの組み合わせを拡大した表示がウィンドウ下部に現れる
  • 2つ目のグリフをドラッグして1つ目のグリフに近づけたり離したりしながら、すべてのグリフの組み合わせが自然に見えるよう調整する

テストと書き出し時の検証

  • FontForge 内でフォントとカーニングをテストするには File > Print を使う
  • 既定のテキストでは可能なすべての組み合わせは表示されないため、自分でテキストを追加できる
  • kern_pairings.txt にはすべてのカーニング組み合わせが含まれており、テスト画面に貼り付けて使える

  • 書き出し中に遭遇しうる問題

    • File > Generate Fonts で書き出すとき、FontForge が一部の文字を確認対象として表示することがある
    • Non-integral coordinates は、グリフ輪郭上の1点または複数の点の位置が 2.25 のように小数成分を持つ場合を指す
    • 問題のあるグリフを選び、Element > Validation > Find Problems で "non-integral coordinates" にチェックを入れ、fix を繰り返す
    • 精密さに大きく依存しない手書きフォントでは、非常に近い整数座標へ移しても大きな変化が出ないことがある
    • Missing points at extrema は、曲線の制御点が曲線を境界の外へ押し出してしまう状態である
    • 曲線の最も高い点や極端点が黄色い点になるように制御点を調整する必要がある
    • Element > Add Extrema が役立つこともあるが、グリフを歪めたり non-integral coordinates の問題を増やしたりする場合がある
    • このエラーがログに出ていてもフォント生成は可能だったが、フォントに微妙で厄介な歪みが生じることがある
    • 手書きフォントが荒れていたり Autotrace を使ったりした場合、extrema の問題が起こりやすい
    • Self intersecting は、グリフの輪郭が自分自身と重なっている状態を指す
    • すべての線を確認して重なりを取り除く必要がある

TTF の選択とインストール

  • 用途には TTF(TrueType Font) で十分だった
  • OTF は、多数のグリフを保存する予定がなく、太字やイタリックを別スタイルとして入れたいわけでもなく、合字も必要なかったため不要だった
  • フォントを使うコンテンツはWebで公開されるものであり、TTF はこの目的に適している
  • Font View のすべてのグリフからフォントを生成するには File > Generate Fonts を使う
  • フォント名の下にあるドロップダウンで出力形式として TTF を選び、確定するとプロジェクトフォルダにフォントが保存される
  • 生成したフォントは、システムのフォント保存場所へ移せばよい
  • 参考資料と使用例

関連記事

1件のコメント

 
GN⁺ 2023-11-28
Hacker News のコメント

  • FontForge の概要がよかった。昔、自分も少し触ったことがある
    少し無骨ではあるけれど、商用の競合製品がずっと良いのかどうかもよく分からない。名前すら知っているものがないのだけど
    それにウェブサイトがとても素晴らしい。独特で個性がはっきりしている

    • FontForge はオープンソースでクロスプラットフォーム、機能もかなり豊富なのでありがたい存在だが、自分で使ってみた限りでは商用の競合製品は実際にはるかに良い
      macOS があるなら、試用期間が十分ある Glyphs(/Mini) や RoboFont を自分で確認できる。それでも一番期待しているのは、fontra.xyz のようなウェブベースのツールを含む次世代のツール群だ
    • MFEK も、より完成した状態になるかどうか引き続き見守る価値がある
      これまで見た MFEK 関連の取り組みはどれもかなりよさそうだった
      https://mfek.org/
    • FontForge の話が出たついでに、フォントを作っている途中で数段落分のテキストを使ってプレビューする方法を知っている人がいるのか気になる
      “quick brown fox” の一文だけでは足りないことが多い

  • 100r.co もぜひ見てみる価値がある
    Devine と Rekka が帆船 Pino でスタジオを運営しながら、生活、旅、プロジェクトを記録している

  • FontForge の要約がよい
    記事が示唆しているように、手書き文字からフォントを作るには、もっと簡単で自動化された選択肢もある。その後で出来上がったフォントをさらに手直しすることもできる
    https://www.calligraphr.com/en/ 旧名は MyScriptFont だった

  • 作ったフォントが、自分が作ったものとかなり似て見える
    https://imgur.com/a/g8bIoUY
    カーニングのような最適化を深く掘り下げたわけではないが、使ってみたソフトウェア3〜4本はどれも非常にじれったいか、壊れているか、扱いにくかった。自分の使い方の問題かもしれないし、有料ソフトならずっと良いのだろうとも思う。最後までやり遂げたのはすごい

  • 複数のフォントを1つのフォントにまとめる一番簡単な方法が気になる
    VS Code は言語やトークンごとのフォント設定をサポートしていない。たとえばコメントには Comic Sans を使い、それ以外には別のフォントを使う、ということはできないが、斜体や太字のような設定は可能だ

  • 80年代に Desktop Publishing が流行してフォントが広く使われ始めた頃から、フォントが好きだった
    一時期は過剰に使われたとも言えるが、デザインが重要だと初めて感じさせてくれたものの一つだった。いずれにせよ素敵なフォントで、概要も素晴らしい

  • MetaFont/MetaPost でフォントを作っている人が実際にいるのか気になる
    FontForge にスクリプティング機能があるのかも知らない。自分で使ったことはなく読んだだけだが、Knuth の “Computers and Typesetting” 全5巻はすべて読んだ

  • フォント制作をしてくれる AI ラッパー系スタートアップがすでにあるのか気になる
    プロンプトが面白そうだ。たとえば「バルカンの影響を強く受けつつソビエト・ブルータリズムも混ざった、子どもに親しみやすいクリスマス用フォントをデザインして」のような感じだ
    商業的にも、異国情緒のあるフォントを使うことが文化的に自然になってほしい。Helvetica、Roboto、Noto Sans や、より現代的なフォントが使われる理由は理解しているが、世界は正直少し味気なくなった

  • ブログ記事自体に自分のフォントを使っていなかったのは、惜しい機会損失だった

  • 「犬がキツネを飛び越える」のではなく、キツネが犬を飛び越える文であるべきだ ;-)
    犬は怠け者で、キツネは素早いからだ