フォントがどのように作られるのか、気になったことはありませんか？

どの書体も、1つの文字から始まり、徐々に完全な文字体系へと発展していきます。フォントのデザインは一見複雑に見えますが、小さなステップに分解すれば、そのプロセスははるかに扱いやすくなります。

この記事では、書体デザインの基礎を解説し、人気のあるフォント編集ツールをいくつか紹介した上で、シンプルな書体を一から作成していきます。この記事を読み終える頃には、フォントがどのように構築されているか、また、さまざまな文字の形がどのように調和して一貫性のあるデザインを作り上げているのかについて、より深く理解できるかと思います。

今回はアルファベット（ラテン文字）のタイプフェイスを例に制作工程を紹介します。日本語フォントも基本的な考え方は共通していますが、収録する文字数が非常に多く、制作規模も大きく異なるため、本記事ではアルファベットを題材に解説します。

今回作成する書体の完成形は、次のようになります。

necco Note Fontのタイプフェイス見本。大文字、小文字、本文テキストのサンプルとフォントの特徴が配置されたポスターデザイン。

フォントエディタの選び方

書体のデザインを始めるには、まずフォントエディタが必要です。

利用可能なアプリケーションはいくつかあり、それぞれ独自のワークフローと機能セットを備えています。

  • Glyphs：macOS を使用するプロのタイプデザイナーの間で人気のある選択肢。
  • RoboFont：macOSで利用できる有料のエディタ。カスタマイズ性に優れ、特にスクリプト作成や実験的な作業に人気があります。
  • FontLab：macOSとWindowsの両方で利用可能な、機能豊富なエディタ。
  • FontForge：macOS、Windows、Linuxで利用可能な、無料のオープンソースエディタ。
  • Fontra：オープンソースでクロスプラットフォームに対応したエディタ。バリアブルフォントの制作を前提に設計されています。

初めての方には、Glyphsが最も扱いやすいでしょう。無料のオプションをお探しなら、FontForgeとFontraはいずれも優れた選択肢です。

この記事ではFontraを使用しますが、どのエディタを選んでも、同じデザイン原則が適用されます。

タイポグラフィの基本用語

文字を描く前に、タイポグラフィに関するいくつかの一般的な用語を理解しておくと役立ちます。

すべての書体は、文字の視覚的な統一感を保つためのガイドラインに基づいて構成されています。

  • ベースライン（Baseline）：ほとんどの文字が位置する線。
  • エックスハイト（x-height）：x などの小文字の高さ。
  • キャップハイト（Cap height）：大文字の高さ。
  • アセンダー（Ascender）：h や l など、エックスハイトより上に伸びる小文字の部分。
  • ディセンダー（Descender）：g や p など、ベースラインより下に伸びる文字の部分。
  • ステム（Stem）：文字の主要な垂直ストローク。
  • カウンター（Counter）：o や e など、文字の内側に囲まれた、または部分的に囲まれた空間。
タイポグラフィの解剖図。キャップハイト、ベースライン、アセンダー、ディセンダー、xハイトなどの文字構造と用語を示す解説画像。

これらの用語を理解しておくと、この後の解説をよりスムーズに読み進められるようになります。

書体の企画

フォントエディタを開く前に、数分間かけて書体の全体的なスタイルについて考えておく価値があります。

次のような質問を自問してみてください。

  • セリフ体にするか、サンセリフ体にするか？
  • 本文用か、大きな見出し用か？
  • モダンな印象、遊び心のある印象、エレガントな印象、それとも技術的な印象にするか？
  • 角は丸みを帯びたものにするか、シャープなものにするか？
  • どのようなプロジェクト向けにデザインするのか？
  • 標準フォントとバリアブルフォントのどちらを作るか？

標準フォントの場合、ウェイトや幅などのスタイルごとに個別のフォントファイルを作成します。たとえば、Regular、Medium、Boldといったウェイトごとに、それぞれ別のファイルを用意する必要があります。

一方、バリアブルフォントでは、1つのフォントファイルにさまざまなスタイルを含めることができます。たとえば、LightからBoldまでのウェイトを連続的に変化させることが可能です。これにより、より細かい調整が可能になりますが、どの軸を実装するかを決める必要があるため、制作プロセスは少し複雑になります。

最初から明確な方向性を定めておくことで、一貫性のあるデザインをスムーズに作り進めることができます。

フォントの設定

お使いのエディタで新しいフォントプロジェクトを作成します。（※本記事では、Fontraを使用しています）

まず、エックスハイト、キャップハイト、アセンダー、ディセンダーなど、書体の基本的なメトリクスを定義します。これらの寸法は、各グリフを描画する際の目安となり、フォント全体を通じて一貫したプロポーションを維持するのに役立ちます。

ほとんどのフォントエディタには適切なデフォルト値が用意されているため、完璧な数値を見つけることにあまりこだわらなくても大丈夫です。デザインが進むにつれて、後からいつでも調整することができます。

Fontraのエディタ画面。ソース設定メニューからアセンダーやキャップハイト、ベースラインなどのフォントメトリクス数値（Line metrics）を設定している状態。

最初の文字を描く

文字「A」から始めるよりも、書体の全体的な構造を確立する文字から始めるほうがはるかに効率的です。

一般的には以下の文字からスタートします。

  • H
  • O
  • n
  • o

これらの文字は、アルファベットの他の文字全体で使用される基本的な形状の多くを定義しています。

例えば、Hはステムの幅や間隔を決定し、Oは書体の曲線やプロポーションを定義するのに役立ちます。小文字のnとoも、小文字のアルファベットにおいて同様の役割を果たします。

これらの文字のバランスが取れたと感じたら、I、L、M、Sなどの文字に進み、徐々に文字セットを拡張していきます。

まず中核となる形状を決定しておけば、残りの文字のデザインもはるかに容易になります。

フォント制作ツールにおける大文字「H」のエディタ画面。パスの頂点とグリフサイズ（Glyph info）などの詳細パネルが表示されている。
フォント制作ツールにおける小文字「n」のエディタ画面。ベジェ曲線のハンドルとアンカーポイント、および右側にグリフ情報が表示されている。
フォント作成ツールでの文字組みテスト画面。「HHOOHOHnnOonoHno」という文字列を配置し、カーニングや文字間隔を確認している様子。

既存の形状の再利用

書体デザインにおいて、時間を大幅に節約できる手法の一つは、既存の文字形状を再利用することです。

多くの文字は類似した構成要素を共有しており、以前にデザインされたグリフを修正することで作成することができます。

例えば、以下のような応用が可能です。

  • n を使って h、m、r を作成できます。
  • o は c、e、q の基礎となります。
  • p を反転させたり、調整したりして b、d、q を作成できます。
  • v は w や y を作るのに役立ちます。

すべての文字を一から描くのではなく、再利用可能な形状のライブラリを徐々に構築していくのです。

このアプローチは、書体の視覚的な統一感を保つ上でも役立ちます。

小文字の「n」のグリフ構造を再利用して「h」を作成するプロセスを示す、ベジェ曲線とアンカーポイントの比較画像。

曲線の微調整

基本的な形状が完成したら、次は輪郭を微調整します。

ほとんどのフォントエディタでは、滑らかな形状を定義するためにベジエ曲線が使用されます。初心者がよく犯す間違いは、ポイントを追加しすぎてしまい、曲線が不均一に見えてしまうことです。

曲線を滑らかでバランスの取れた状態に保ちつつ、必要な最小限のポイント数に抑えるようにしましょう。

定期的にズームインして輪郭を確認しますが、ズームアウトして実際に使うサイズで全体の形状を確認することも忘れないでください。

例えば800%にズームインしたときに気になるような小さな不備も、実際の使用サイズではほとんど目立たないことがよくあります。

ベジェ曲線のアンカーポイント数の違いによる比較画面。左側の少ないポイントで滑らかなカーブを描く手法と、右側の多くのポイントを使用した例を対比している。

文字間隔とカーニング

たとえ美しく描かれた文字であっても、文字間隔が適切でなければ不自然に見えてしまいます。

まずはサイドベアリング（各グリフの左右にあるデフォルトのスペース）を調整することから始めましょう。一貫した文字間隔は、読みやすいフォントの基礎となります。

全体的な文字間隔のバランスが取れたら、カーニングに取り掛かりましょう。

カーニングとは、AとVのように文字の形によって隙間が広く見えてしまうペアなど、特定の文字ペアの間隔を個別に調整することです。代表的なものとして、以下のようなペアがあります。

  • AV
  • WA
  • To
  • Yo

多くのフォントエディタには、間隔を調整しながら単語や文章をプレビューできるツールが備わっており、不整合を見つけやすくなります。

書体のテスト

文字のデザインを進めるにつれて、定期的にフォントを生成し、実際の使用環境でテストを行ってください。

単語や段落全体を入力してみると、個々のグリフを見ただけでは気づかない問題が明らかになることがよくあります。

さまざまなサイズでフォントを確認したり、見本ページを印刷したり、既存の書体と並べて比較したりしてみてください。

デザインの進行に伴い、以前の文字を見直して調整を加えることはごく自然なことです。書体デザインは反復的なプロセスであり、洗練された結果を生み出す上で、微調整は不可欠な工程です。

「The Quick Brown Fox Jumps Over The Lazy Dog」の英文を使った、necco Noteフォントのタイポグラフィテスト画面。

フォントのエクスポート

納得のいく形になったら、フォントをエクスポートしましょう。

ほとんどのエディタでは、数回クリックするだけで、OpenType（OTF）やTrueType（TTF）などの形式でフォントを書き出せます。バリアブルフォントは、OpenType Font Variationsを使用したOpenTypeフォントで、.otfや.ttfとして書き出すことができます。Webでフォントを使用する場合は、WOFF2形式が一般的です。

エクスポート後は、フォントをコンピュータにインストールし、お気に入りのデザインソフトや文書作成ソフトで実際に使ってみてください。

自分のデザインした書体が実際のプロジェクトで使われているのを見るのは、このプロセスの中で最もやりがいを感じる瞬間の一つです。

Fontraソフトウェアのファイル書き出しメニュー画面。TrueType (.ttf) や OpenType (.otf) などのフォントフォーマット選択リスト。

まとめ

書体のデザインには忍耐が必要ですが、タイポグラフィやビジュアルデザインについてさらに深く学ぶことができる、やりがいのある作業でもあります。

いくつかの主要な文字から始め、可能な限り形状を再利用し、テストと反復を通じて作品を磨き上げることで、統一感があり機能的な完成された書体を徐々に作り上げていくことができます。

個人的なプロジェクトやブランディングのためにフォントを作成する場合でも、単に新しいことを学ぶためであっても、上達するための最善の方法は、実験を続けることです。修正を重ねるたびに何かを学び、新しい書体は前回よりも少しずつ良くなっていきます。

この入門編が、あなた自身のフォントを作成するための確かな出発点となれば幸いです。