コンテンツへスキップ

こんにちは。ANGEL VIBESです。
突然ですが、フォントデザインの作業動画を公開しているので、お知らせします。

動画は、Adobe Illustratorでフォントの元となるベクター画像を作り、それをGlyphsでフォントデータ化するまでの記録となります。1セットのフォントが完成するまでの過程ということになります。今回は、レトロ目なイメージの手書き風の仮名フォントです。

今までの作業では、とりあえず、Adobe Illustratorでグリフ全体に手がつけられたというところでしょうか。
実際にどんな様子で作業をしているのか、覗いて見ませんか?
以下のように、今のところ、YouTubeで6本目までの動画をアップしています。

【フォントデザイン】レトロ感ある仮名フォントが完成するまで(1)〜Adobe Illustratorでベクター画像を作る(1)〜


【フォントデザイン】レトロ感ある仮名フォントが完成するまで(2)〜Adobe Illustratorでベクター画像を作る(2)〜


【フォントデザイン】レトロ感ある仮名フォントが完成するまで(3)〜Adobe Illustratorでベクター画像を作る(3)〜


【フォントデザイン】レトロ感ある仮名フォントが完成するまで(4)〜Adobe Illustratorでベクター画像を作る(4)〜


【フォントデザイン】レトロ感ある仮名フォントが完成するまで(5)〜Adobe Illustratorでベクター画像を作る(5)〜


【フォントデザイン】レトロ感ある仮名フォントが完成するまで(6)〜Adobe Illustratorでベクター画像を作る(6)〜

まだ作業は続きますし動画も追加していきますが、フォントが完成したら、こちらのブログでもそれぞれのプロセスでの細かな解説をしていく予定です。

では、また!

こんにちは。ANGEL VIBESです。
フォントデザインをするには、まず、その元となる一式の書体(タイプフェイス)の図案を作ります。一式の書体にするためには、各グリフの図案に共通するフォルムのパーツをデザインしなければなりません。フォントのデザインをするプロセスでは、無意識のうちにこの「共通パーツ」を作っていたりすると思いますが、この共通のフォルムとなっている図案の各部分を「エレメント」と言います。この「エレメント」がグリフの図案を成り立たせる要素になります。
フォントの書籍や作成ソフトでは、エレメントの名称を用いた説明やキャプションがあったりするので、ちょっとご紹介します。

「サンセリフ体」の「セリフ」とは?

「サンセリフ体」って聞いたことはありませんか? フォントの書籍でも時折見かける用語ですよね。これは、アルファベット書体の様式の種類を表しています。「サンセリフ体」の種類には、ヘルベチカ(Helvetica)やユニバース(Univers)、フーツラ(Futura)等があります。
「サンセリフ」は、もともとはフランス語の「Sans-serif」です。「Sans(サン)」はフランス語で「ない」を表します。「サンセリフ」で、「serif(セリフ)」が「ない」ということになります。なので、書体としては、セリフがない様式の種類ということになります。
ところでこの「serif(セリフ)」とは何でしょう。これこそエレメントの一種で、下の図にあるような出っ張った部分を指します。
「サンセリフ体」に対し、「セリフ」があるアルファベット書体の様式の種類は「セリフ体」と言います。「セリフ体」には「ガラモンド(ガラモンとも言う、Garamond)」や「キャスロン(Caslon)」等が該当します。この「セリフ体」と「サンセリフ体」を比べてみると、「セリフ」がどの部分かがはっきり判るかと思います。下の図をご覧ください。図で示している出っ張り部分は、「セリフ体」にはありますが、「サンセリフ体」にはありません。この出っ張り部分がエレメントの一種、「セリフ」というわけです。

「セリフ体」と「サンセリフ体」

このように、エレメントに関わる用語というのは、フォントデザインをしていると時折見かけることになりますので、主要なところだけでも覚えておいて損はありません。

「ステム」とは?

フォント作成ソフトの「Glyphs」には、「フォント情報」に「垂直ステム」「水平ステム」といった項目があります。
この「ステム(stem)」とは、下図で示すような縦方向に伸びる直線部分です。例えば「T」や「I」といったグリフの図案にみられるような縦方向の直線部分です。諸説あり、例えば「T」に見られるような横方向の直線部分を指す場合もあります。「Glyphs」では、縦方向に伸びる直線部分は「垂直ステム」、横方向に伸びる直線部分は「水平ステム」、そのような意味合いでそれらの用語が用いられています。
「ステム(stem)」も時折見かけるエレメントの名称なので、こちらも覚えておいて損はないと思います。

「エレメント」のいろいろ

「エレメント」の種類は、「セリフ」や「ステム」の他にもいろいろあります。「エレメント」で知らない名称が出てきたら、ちょっと参照してみてください。

「エレメント」のいろいろ

まとめ

  • 各グリフで共通のフォルムとなっている図案の各部分が「エレメント」、グリフの図案を成り立たせる
  • 「セリフ」は出っ張り部分で、「サンセリフ体」にはないエレメント
  • 「ステム」は「T」や「I」に見られる直線部分のエレメント

では、また!

こんにちは。ANGEL VIBESです。
フォントを作るには下絵やアイデアスケッチは必要です。中には、頭の中に明確なイメージを描くことができて、下絵ナシでデザイン作業を始めてしまうベテランの方、下絵ナシの方が作業がしやすいという方もおられます。
とはいえ、慣れないうちは無理をしない方が良いでしょう。とりあえず、下絵を作成しスキャニング→Adobe Illustratorでトレースをしていく手法で、デザインするのがベターだと思います。
このサイトでは、Adobe IllustratorでトレースしたベクターデータをAI形式で保存し、フォント作成ソフトに取り込んで(それはGlyphsでもFontographerでも)、フォントデータを作る方法を説明してきました。デザインを決めて下絵を作成する方法も説明しましたが、下絵の様式は一つではありません。今回は、ちょっと悩みどころかもしれない、フォントの下絵についてのお話です。

 

フォントのデザインイメージと下絵

フォントの下絵の作り方は、「フォントの作り方(3)」「フォントの作り方(15)」で説明しました。
しかし、もしかすると、下絵を作成する段階で戸惑いが生じてしまってる方もおられるかもしれませんね。どのような手法で下絵を作るのかというのは悩みどころではあります。私の場合ですが、下描きした下絵とデザインしたいイメージとに乖離がある感じがして、どうにもしっくり来ない時があり、ちょっと悩んだことがあります。

 

フォントのイメージの様式に合わせた下描きの手法

いろいろ考え試行錯誤しましたが、フォントのイメージの方向性に合わせて下描きの手法を変えた方が良いようです。私の場合ではありますが、その方がイメージとに乖離が少なくなりました。
フォントの元になる文字を作成し、一式の様式となるタイプフェイス(書体)にするためには、文字の共通パーツとなるエレメントを組み合わせていくことになります。スタンダードなフォントの多くは、そのようなタイプフェイスによるデザインです。
一方で、エレメントの組み合わせに頼らない、手書き感を活かした「書き文字」というフォントのジャンルもあります。現在では「書き文字」ばかりを集めたフォントの書籍があったりするぐらいで、こちらも現在流通するフォントとしてはかなり種類があると言えそうです。上のエレメントを組み合わせてデザインするタイプフェイスが緻密であれば、こちらはストロークによる「味」を生かしていて直感的であると言えるでしょう。なお、「書き文字」についての歴史は古く古代に遡ることができますが、そのお話は、またの機会にしますね。

現在流通しているフォントのイメージの方向性を大別すると、
1. エレメントの組み合わせでデザインされた「緻密タイプ」
2. 手書き感を活かした書き文字等の「直感的タイプ」
この2つのタイプがあります。これら2つの様式に合わせ、下描きの手法を変えた方がイメージ通りになる場合もあるようです。

 

「緻密タイプ」は下描き用紙を使う

以前に紹介してますが、「緻密タイプ」は、碁盤の目がある下描き用紙に鉛筆等で描いて下絵を作成→それをスキャンしてトレースする、この手法でだいたいはカバーできるかと思います。
ちなみに、その際に用いる下描き用紙はこちら。DLして自由にお使いいただけます(なお、この下描き用紙をそのまま販売することは禁止します。念のため。)。

下描き用紙はこんな方眼紙です。

こんな感じで下描きをしていました。

 

「直感的タイプ」は下描き用紙を使わない

手書き感を生かした「直感的タイプ」のフォントですが、碁盤の目がある下描き用紙に鉛筆等で下描きをしてしまうと、どうにも整いすぎるというか、手書きの勢いや「味」が失われる場合があります。そんな場合は、下描き用紙を使う必要ありません。もっとラフに描くなど、落描き的に好きな紙に描いた文字を、そのままスキャンしてAdobe IllustratorのAIドキュメントにレイアウトしてトレースしていただいた方が、描いた線が生き生きしたタイプフェイスに仕上がります。

こちらは、ネタ帳に描いたラフ画をそのまま下絵にしています(私がデザインしたフォント「マカロ」の下絵です)。



こちらは、画用紙に描いたペン画を下絵にしています(私がデザインしたフォント「ほおずき」の下絵です)。

 

私の場合ですが…

私の場合、という前提はありますが、下描きの手法を変えることでイメージしたフォントにより近づけることができる、ということは言えそうです。
もし、下描きのことで悩んでる方がおられましたら、一度試してみても損はないと思いますよ!

 

まとめ

  • フォントのデザインの様式に合わせて下描きの手法を変えるとイメージに近くなる(個人差アリとは思います)
  • エレメントの組み合わせでデザインする「緻密タイプ」は下描き用紙を使う
  • 書き文字等の手書き感を活かした「直感的タイプ」は下描き用紙を使わない

では、また!

こんにちは。ANGEL VIBESです。
グラフィックデザインにおいて、「字詰め」ができているものとそうでないものの見え方は、ずいぶん異なります。「字詰め」とは何かーーーこれは「文字詰め」とも言いますがーーーグラフィックの文字部分の文字と文字の間のアキを調整することを指します。GlyphsやFontographer等のフォント作成ソフトを使用したフォントデザインでも、カーニングやスペーシングの作業に関わってきます。「字詰め」は、グラフィックデザイン全般における重要な要素なので、基本はおさえておきましょう。

 

「字詰め」はデザインの重要要素

上に述べたとおりですが、文字と文字の間のアキを調整することを「字詰め」と言います。文字と文字の間のアキを調整し、バランス良く見えるようにするということです。どこかの部分だけ、詰まって見えたり、逆に間が空いて見えたりしないように文字を移動して調整します。
「字詰め」はていねいに「文字詰め」と言ったりもします。私の周りの同業の人々では「字詰め」と言っている方が多いような気がします。
「字詰め」は、グラフィックデザイン全般において重要な要素です。なぜなら、多くのグラフィックデザインの要素には文字が含まれるからです。文字に関わるデザインは、フォントやロゴのみならず、パッケージの商品名部分、エディトリアルではタイトルや見出しそして本文部分と、多岐に渡って見出すことができます。
このように、グラフィックデザインのあらゆる部分に文字が関わっているわけですが、「字詰め」をしっかり行うことでデザインがどんどん洗練されたものになります。

 

文字と文字のアキのバランスは、どのように調整する?

「文字と文字の間のアキが均等にバランス良く見えるよう、調整をする」という一言ですが、実はこの作業は奥が深いです。文字と文字の間のアキについて調度良く見えるバランスというのは、各個人によって異なります。また、デザイナーによっても好みが分かれる部分のようにも見受けられます。ヤング層はキツキツの「字詰め」を好む一方で、中高年齢層は詰めが緩いスカスカした「字詰め」を好む、という説もリアリティを持っています。「字詰め」のキツい・緩いには絶対的な解はありません。とはいえ、キツい・緩い、どちらの方向性が好みであっても、バランスの良い「字詰め」には基本的には共通項があります。まずは、そういった部分を知っておきましょう。そうしておけば、デザインの現場ではそれほど迷うことはないと思いますよ。

 

文字を○△□としてとらえる

文字を文字と思うからこそ戸惑ってしまうのかもしれませ。文字も要するに図形です。図形と図形の間のアキが、全体的な配列から見て均等になっていればバランス良く見えます。
文字をぼ〜っと見て見ましょう。ものの形は単純化すると○(丸)、△(三角)、□(四角)のどれかに還元されます。これらを調整して並べてアキに偏りが出ないようにすれば良いわけです。アキをキツくするにしろ緩くするにしろ、偏りがなければ全体として均等なアキに見えます。とにかくアキに偏りが出ないようにしましょう。

文字を単純化してこんな感じで調整します

 

△の周りはアキが出やすい

単純化すると三角になる文字の周りはアキが出やすいのでチェックポイントです。具体的には、「A」や「V」、「T」などが該当します。ロゴでも本文でも、他の文字に比べて「A」や「V」の周りのアキが目につく時があると思います。「気になるなあ」と思う時はアキを詰めてしまいましょう。全体に馴染み、気にならなくなればOKです。

 

長方形の周りもアキが出やすい

単純化すると縦長の四角形=長方形になる文字の周りもアキが出やすいのでチェックポイントです。具体的には、横組みのひらがな「り」などが該当します。こちらもアキが気になる場合は、詰めてバランスをとりましょう。
ただし、横組みの数字の「1」や「I」は、詰めすぎると他の文字に同化して見えるので注意が必要です。同化してしまうことにより、可読性が失われてしまうことにもなりかねません。周りの文字の詰まり具合に比べ、ちょっと空き気味でも大丈夫です。

 

まとめ

  • 文字と文字の間のアキを調整することを「字詰め」と言う
  • 文字を○△□としてとらえると「字詰め」が行いやすい
  • △や長方形の周りはアキが出やすい

では、また!

こんにちは。ANGEL VIBES です。
前回の続きです。フォント関連のWebサイトや書籍で、フォントフォーマットに関してもよく目にする用語ってありませんか? 中でも、「OpenType Font」と「TrueType Font」は、よく目にしませんか?

 

フォントのよく見かける形式

DTPに用いるフォントには、そのフォーマットに種類があります。「OpenType Font」、「TrueType Font」などがそうです。フォントフォーマット(=フォント形式)に種類があるなど、なぜそんな面倒なことに…! とお思いの方もいるかも知れませんね。しかし、以前に比べれば、これでも種類が絞られて来た状態なのですよ…。
歴史を遡れば、フォントフォーマットには現在よりももっと種類があり、フォントデータの成り立ちが複雑でした。1つのフォントファイルに対し、セットでインストールが必要なスクリーン表示用の「スクリーンフォント」が必要だったり…。現在と比べれば、PCのHDには、フォントフォルダやファイルが複雑に乱立しているような状態でした。使いにくいという面もあり、AppleやAdobe等が、よりユーザビリティの高いフォントフォーマットを考案してきました。
現在主流なのは、「OpenType Font」、「TrueType Font」、この2つと言っていいでしょう。フォントフォーマットはだいぶん絞られて来たようです。とはいえまだ、「CID」というフォーマットも流通していて、デザインの実務の現場では見かけることがあります。しかし、「CID Font」は、モリサワ等のフォントベンダーが「OpenType Font」に置き換えて行っている流れがあります。したがって、DTPやDTPを念頭にフォントデザインをするなら、「OpenType Font」、「TrueType Font」を覚えておけば、とりあえずは充分だと思います。

 

「OpenType Font」とは?

「OpenType Font」は、DTPに用いるフォントでは現在主流になっているフォントフォーマットです。モリサワ等は「CID」(「NewCID」を含む)の後継に、「OpenType」を採用しています。「OpenType Font」は、MacでもWindowsでも使用が可能なクロスプラットフォームとなっています。今では当たり前のようになっていますが、「OpenType」ができる以前は、同一のフォントデータをMacにもWindowsにもインストールして使用できるわけではありませんでした。また、「OpenType Font」は、1つのフォントにつき1つのフォントファイルという仕様になっています。これももはや当たり前ですが、古いフォントフォーマットでは、1つのフォントにつき、セットでいくつかのフォントファイル(たとえばスクリーンフォントのような)のインストールを必要とする種類もありました。かつてを思えば、フォントは扱いやすくなったものです。

 

「TrueType Font」とは?

「TrueType Font」は、MacでもWindowsでも使用され、フォントの黎明期からある最も親しまれて来たフォントフォーマットの1つです。MacがOS Xになってからは、一応は、Windows用の「TrueType Font」もMac上で動かすことは可能になりました。とはいえ、ライセンス面の問題などがあるので、現実的には各フォントごと確認が必要ですし、あまり古いWindows用の「TrueType Font」なら、OS XであってもMac上では動かない可能性がゼロとは言えません。
「OpenType Font」には、技術的に「TrueType Font」をベースにしている種類も含まれます。「TrueType Font」は将来的には、「TrueType Font」の発展型である「OpenType Font」に置き換わって行くかも知れません。ただ現実的には、今のところは「TrueType Font」もまだまだ現役といった印象です。「OpenType Font」が流通するより以前に入手した「TrueType Font」が、OS Xでもまだ普通に使える場合もあります。
実際、私もタイプフェイス的に気に入って使用している古い「TrueType Font」があります。気に入ったフォントは簡単に捨てられないですものね。使える限りは使います。いや、使えなくなると、それはそれで困りものです。

 

アウトライン化は?

「OpenType Font」も「TrueType Font」も、多くはアウトライン化は可能です。DTPで実際に印刷会社さんに入稿する時は、フォントについてはアウトライン化を勧められることもしばしばあるので、印刷会社さんごとに要確認です。

 

まとめ

  • 現在のフォントフォーマットの主流は「OpenType Font」と「TrueType Font」
  • 「OpenType Font」はMacでもWindowsでも使用が可能
  • 「TrueType Font」はMacでもWindowsでも黎明期から使用されてきた

では、また!

こんにちは。ANGEL VIBES です。フォントデザインの基本がギュッとつまったツールとして、私はGlyphs Miniを推します。そんなお話は既にしていますね。Glyphs Miniは、他のソフトに共通する機能を備えているので、これからフォントデザインをはじめようという方にはオススメですよと、お伝えして来ました。何より、フォント作成ソフトとしては安価ですしね。そうした点からもオススメというわけです。
でも、そろそろGlyphsを使ってみたいという方もいらっしゃるでしょう。今日はそういった方に向けたお話です。

 

Glyphs Miniとは?

少しおさらいしておきますね。Glyphs Miniとは、一言で言うと、Glyphsの廉価版のフォント作成ソフトです。Glyphsの機能を簡略化した製品ではありますが、AdobeIllustratorで作成したAIデータを取り入れてフォントデータを作成することができる仕様は共通しています。ちなみにFontographerも、この仕様は共通です。
Glyphs MiniはGlyphsの廉価版ながら、1バイトのローマ字フォントを作成するには充分な機能を備えています。私の経験的には、アイコンやイラストフォントなら、機能が少ないGlyphs Miniの方がかえって使いやすいという印象です。でも、機能が少ない分、GlyphsにできてGlyphs Miniにできないことがあったりします。なので、状況に合わせて、Glyphsを優先して使用することもあります。

 

GlyphsとGlyphs Miniの違い

上に述べたように、Glyphs Miniの方がGlyphsよりも機能が少ないです。なので、仕様が違う点があります。グリフを追加するツール部分と「フォント情報」の部分は、大きな仕様の違いがあるので見てみましょう。

 
[グリフを追加するツール部分]

Glyphsの「左メニュー」→「文字体系」→「和文」の部分

 

Glyphs Miniの「メニューバー」→「ウィンドウ」→「グリフ情報」の部分

 
見比べて解るように、左メニューが見た目にも違いますね。和文のグリフの追加は、Glyphs Miniでは、「メニューバー」→「ウィンドウ」→「グリフ情報」から選択して行う仕様ですが、Glyphsでは「左メニュー」→「文字体系」→「和文」から、追加することも可能です。漢字については、「常用漢字」「JIS第1水準」「JIS第2水準」と区分けがされていて(三角の所をクリックして開くと項目が出て来ます)、そこからまとめてグリフを追加することができます。「かな」についても同じように区分けがされているので、そこからまとめて追加が可能です。その点、Glyphs Miniにはそういった和文の区分けはなく、「グリフ情報」で、unicode順に並んだグリフから選択し追加しなければなりません。
「常用漢字」のグリフを追加したい時に作業をしやすいのは、グループ分けしているGlyphsの方でしょう。和文のグリフの追加は、Glyphsの方がスムースそうですね。

 
[「メニューバー」→「ファイル」→「フォント情報」の部分]

Glyphsの「メニューバー」→「ファイル」→「フォント情報」の部分

 

Glyphs Miniの「メニューバー」→「ファイル」→「フォント情報」の部分

 
見た目でもわかりますが、「フォント情報」は、Glyphsに比べGlyphs Miniの方が記入事項が少ないですね。Glyphs Miniが、「info」に記入事項があるだけなのに対し、
Glyphsは「フォント」、「マスター」、「インスタンス」…、と続き、すべてのメニュー項目に記入事項があります。
それだけ、Glyphsの方が細かい設定が必要ということですが、ここに和文を縦書きにできる設定が含まれています。この設定、Glyphs Miniにはありません。

 

Glyphsの利点

GlyphsとGlyphs Miniですが、見た目も使い方も、両者は確かに似ているし共通項もあります。でもGlyphs Miniは廉価版というだけあって、機能が簡略化されている部分があります。なので、GlyphsにできてGlyphs Miniにできないことが当然出てきます。GlyphsにはGlyphs Miniにはない利点があるということです。

簡潔に言うと、
・Glyphsの方が和文フォントのグリフの追加がしやすい
・Glyphsは縦書きができる和文フォントが作成できる

もちろん、細かい点ではもっとGlyphsの利点があげられると思いますが、まずはそこだけでも覚えておきましょう。

 

まとめ

  • Glyphs MiniはGlyphsの廉価版で、Glyphsの機能を簡略化した製品
  • Glyphsの方が和文フォントのグリフの追加がしやすい
  • Glyphsは縦書きができる和文フォントを作成できる

では、また!

こんにちは。ANGEL VIBESです。前回は、Glyphs Miniのメトリクス関連情報の設定の途中まで解説しましたね。今日はその続きです。「キャップハイト」「xハイト」の設定をしてみましょう。
 

「キャップハイト」「xハイト」の設定の前に

混乱している方がいるかもしれないので、「キャップハイト」「xハイト(=「エックスハイト」、Glyphs Miniでの表記は「xハイト」)」の設定の前に、ちょっとメトリクスのお話を復習しておきますね。

フォントの作り方(13)〜メトリクスの話〜」で触れてますが、従来の「欧文書体設計のためのライン」において言う「アセンダー」と、フォント作成ソフトで言う「アセンダー」は、意味が異なります。これはGlyphs Miniにおいても例外ではありません。
厳密には「ディセンダー」についても同じことが言えます。従来の「欧文書体設計のためのライン」において言う「ディセンダー」と、Glyphs Miniにおいて言う「ディセンダー」は、それぞれ指している意味が厳密には異なります。
復習しますね。フォント作成ソフトを利用した現在のフォントデザインの潮流では、一つ一つのグリフが、emスクエアよりも一回り小さくデザインされている例を多く見かけます。そういった事情もあり、Glyphs Miniにおいて「ディセンダー」と言う時に、従来の意味とは厳密にはズレが生じてきているようです。
従来の「欧文書体設計のためのライン」においては、「ベースライン」から「ディセンダーライン」までの部分を「ディセンダー」と呼んでいました。ところが、Glyphs Miniでは「ベースライン」から「ディセンダーライン」までを指して「ディセンダー」とするのではなく、「ベースライン」からemスクエアの下端までを指して「ディセンダー」としてしています。Glyphs Miniを使用してデザインする際、emスクエアよりも一回り小さくグリフをデザインする現在の潮流に従うならば、「ディセンダーライン」の一周り外側までを含んで「ディセンダー」と呼ぶことになってしまっています。従来の「欧文書体設計のためのライン」における場合と、Glyphs Miniにおける場合とでは、このように、細かな部分では意味が異なります。
モヤモヤするかもしれませんが、従来使われて来た文言の意味の細々した部分は、時代とともに変化してしまうことは自然なことでもあります。とりあえず、従来の「欧文書体設計のためのライン」においての文言は、Glyphs Miniにおいて言う全く同一の意味とは限らないので、ちょっとだけ注意しておきましょう。

 

従来の「欧文書体設計のためのライン」

Glyphs Miniで言う「ディセンダー」はemスクエアの高さ下端まで

 

「キャップハイト」「xハイト」の設定

それでは、Glyphs Miniのメトリクス関連情報の設定に戻ります。確認しておきますね。「キャップハイト」は「ベースライン」から「キャップライン」までの高さを指します。そして、「xハイト」は「ベースライン」から「エックスライン」までの高さを指します。
「元AI」では「キャップライン」と「エックスライン」をガイドラインとして描いておきましたね。なのであとはスムースだと思います。ガイドラインを頼りに「キャップハイト」「xハイト」の高さを測ったそのままの数値を、Glyphs Miniのメトリクス関連情報の「キャップハイト」「xハイト」の欄に入力してください。
「Alfalfa」では、「キャップハイト」が「667」、「xハイト」が「493」。なお、小数点以下の端数は整理しました。
そして、「イタリック角度」ですが、デフォルトのままにしておきます。
それから、「アラインメントゾーン」は一番右の黒いボタンを押しておきましょう。自動計算されます。
これで設定はOKです!

「Alfalfa」はこんな感じで設定しました

Glyphs Miniのメトリクス関連情報の設定

 

グリフの画面はこんな感じです

グリフの画面を開いてみてください。小文字だと解りやすいですが、ガイドラインがグリフの「キャップライン」「エックスライン」の位置にぴったり重なっているのが解りますか?

Glyphs Miniのグリフの画面

 

こうしたガイドがあれば、正しい位置を踏襲したフォントがデザインできているかどうか、確認しながら作業ができますね。

 

あとは小文字なしのデザインの時と同じ作業

小文字もデザインする場合、「フォント情報」設定は以上のように、「キャップハイト」「xハイト」も測定した数値を入力しなければなりません。ですが、ここまで出来れば、小文字なしのデザインの時と同じ作業です。グリフをトレースした「元AI」データを、Glyphs Miniに読み込ませていきます。忘れてしまっていたら過去記事(「フォントの作り方(11)〜Glyphs Miniの使い方(後編)〜」あたりからが良いでしょう)を読んでみてください。
スペーシングやカーニングをして、メニューバーから「ファイル」→「出力」を選び、ファイルを書き出せば完成です!

 

まとめ

・Glyphs Miniで言う「ディセンダー」は「ベースライン」からemスクエアの高さ下端まで
・「元AI」のガイドラインを頼りに計測し端数を整理した数値を、「フォント情報」の「キャップハイト」「xハイト」に入力する
・「フォント情報」の設定までできれば、あとは大文字だけのデザインの時と同じ作業

こんにちは。ANGEL VIBESです。今回は、アルファベット・フォントの大文字に加え小文字もデザインする際のお話の続きです。前回までのお話で、Glyphs Miniに読み込ませるためのAIデータ=「元AI」作成まで進みました。ここまで準備が整ったら、いよいよGlyphs MiniにAIデータを読み込ませる作業です。

 

Glyphs Miniを使った作業の流れ(おさらい)

Glyphs Miniを使った作業の流れについておさらいしますね。まず、フォントのデザインを決め、AdobeIllustratorでトレースし、グリフ一つずつの「元AI」を作成、これらをGlyphs Miniに読み込ませてフォントデータ化して完成です。忘れてしまっていたら、「フォントの作り方」の過去記事((3)あたりからがいいでしょうか)を読み返していてください。
で、前回までの解説では、「元AI」の作成まで進みました。小文字のデザインもするならばということで、「元AI用紙.ai」ドキュメント上に、キャップライン、エックスライン、ベースラインをガイドラインとして描きましたね。これを行っておけば、次の作業、Glyphs MiniにAIデータを読み込ませる時にスムースということでした。なぜスムースなのかは、次の作業のお話の中で。

「元AI」にはキャップライン、エックスライン、ベースラインを描く

 

Glyphs Miniを起動したら「フォント情報」の設定

ここからは、Glyphs Miniを起動しての作業となります。Glyphs Miniを立ちあげ新規のドキュメントを開いたら、最初にする作業がありましたね。まず、「ファイル」→「フォント情報」を選び各項目の設定をします。
「ファミリー名」の設定、「クレジット関連情報」の設定、「バージョン」の設定は、大文字だけのデザインの場合と同様に進めてしまってください(忘れてしまってたら、「フォントの作り方(10)」を復習しましょう)。
次に、メトリクス関連情報の設定があります。「アセンダー」「キャップハイト」「xハイト」「ディセンダー」の数値を入力しなければなりませんが、「元AI用紙.ai」ドキュメント上にキャップライン、エックスライン、ベースラインをガイドラインとして描いたことで、スムースに進むはずです。そして、大文字に加え小文字もデザインする場合、Glyphs Miniを使用する手順はここだけ異なります。大文字だけのデザインの場合と異なり厳密に設定しなければならない部分です。

 

メトリクス関連情報の設定は厳密に

メトリクス関連情報には、「ユニット数(UPM)」「アセンダー」「キャップハイト」「xハイト」「ディセンダー」「イタリック角度」がありましたね。
大文字だけのデザインの場合は「キャップハイト」「xハイト」はデフォルトのままで任意の数値が入ってれば良かったのですが、小文字もデザインする場合は、厳密な数値を入れます。

復習を含めつつ順を追って説明しますね。まず、「ユニット数(UPM)」についてです。これはデフォルトのまま「1,000」でOKです。繰り返しの説明になりますが、Glyphs Miniにおけるグリフのマスの高さはemスクエアの高さと同一視でき、「ユニット数(UPM)」という単位で示されます。
Glyphs Miniにおけるグリフのマスのユニット数は、仕様で1,000となっていますが、1,000のままにしておきます。Glyphs Mini上の単位「ユニット」の大きさは、AdobeIllustrator上での単位「ポイント」の大きさに一致します。「元AIデータ」のドキュメントサイズの高さを1,000ポイントに設定したのは、Glyphs Miniにおけるグリフのマスのユニット数である1,000ユニットに合わせるためです。
このように設定しておけば、AdobeIllustrator上のAIデータをGlyphs Miniに取り入れた時に、「元AI」の1,000×1,000ポイントの位置合わせ用のラインが、Glyphs Mini上のグリフのマスの高さである1,000ユニットにピッタリ重ねられます。

次に「アセンダー」と「ディセンダー」です。Glyphs Mini上の「ユニット」の大きさはAdobeIllustrator上の「ポイント」の大きさに一致するので、「元AIデータ」上の数値が、そのままGlyphs Miniにおける数値になります。したがって、AdobeIllustrator上の「アセンダー」と「ディセンダー」の高さを測り、Glyphs Miniのメトリクス関連情報にそのまま入力すればいいわけです。「元AI」のベースラインからドキュメント上端までの高さが「アセンダー」、ベースラインからドキュメント下端までの高さが「ディセンダー」となります。
高さを測った時「元AI」上で端数が出ていたら、切り捨てるなどして調整しましょう。ただし、「アセンダー」と「ディセンダー」の高さの合計は1,000になるようにします。

復習します。

emスクエア(の高さ)=アセンダー+ディセンダー

でしたね。

なので端数が出た時の調整では、「アセンダー」と「ディセンダー」の高さの合計は1,000になるようにしなければならないのです。

 

Glyphs Miniの画面。グリフのマスの高さは1,000ユニット(UPM)です。
元AIデータの高さ1,000ポイントは、これに合わせています。

Glyphs Mini画面

次は「キャップハイト」「xハイト」の設定ですが、続きは次回。

 

まとめ

・小文字のデザインでは「キャップハイト」「xハイト」を厳密に設定
・Glyphs Miniの仕様では、1つのemスクエアの高さ=1,000ユニット(UPM)
・emスクエア(の高さ)=アセンダー+ディセンダー

ではまた!

こんにちは。ANGEL VIBESです。フォント作成ソフトを使ったアルファベット・フォントのデザインについて、説明した回もありますが、流れはだいたい解りましたか? 慣れるまでは無理せず、大文字だけデザインしてみても良いと思いますが、今日は、そろそろ小文字も一緒にデザインしてみたいという方に向けたお話をしようと思います。

 

「欧文書体設計のためのライン」をおさらい

「フォントの作り方(13)」でも説明しましたが、フォントの世界には、従来から「欧文書体設計のためのライン」があり、これがフォントのデザインやレタリングを行う上でのガイドラインとなっていました。デジタルによるフォントのデザインが始まる以前から用いられてきたわけで、これは今日のフォント作成ソフトの「メトリクス情報」のルーツとなってもいます。
今回は大文字だけでなく小文字もデザインするということなので、「欧文書体設計のためのライン」について振り返っておきましょう。大文字だけなら、「アセンダーライン」「ベースライン」「ディセンダーライン」ぐらいを覚えておけば良いですが、小文字をデザインするために「エックスライン」をチェックしておきたいのです。

 

従来の「欧文書体設計のためのライン」


再度、掲載しましたよ。図を見ると解るかもしれないですが、アルファベット・フォントの小文字をデザインする際には、「アセンダーライン」「ベースライン」「ディセンダーライン」に加え、「エックスライン」が重要なラインとなります。小文字の「g」の上端に接するラインとなっていたりするこの「エックスライン」ですが、グリフの部分によってはこのラインに高さを揃えた方が、フォント全体として見た時に統一感が出ます。

 

Helveticaの小文字を当てはめてみると・・・

アルファベット・フォントの小文字において「エックスライン」がどう介在しているのか、おそらく見てただいた方が早いかと思います。Helveticaの小文字を例に、「欧文書体設計のためのライン」にあてはめてみました。

Helveticaの小文字

およそこんな構造になっているんだな・・・という認識があれば、デザインもいやすいと思います。こことここの高さを揃えると統一感が出るんだな、という部分は覚えておきましょう。

 

小文字を含めたアルファベット・フォントのデザインの流れ

小文字を含めたアルファベット・フォントの実際のデザインの流れですが、それは今までの「フォントの作り方」で説明してきたとおりです。大文字だけのフォントをデザインする時も小文字も含めてデザインする時も、流れは変わりません。

オリジナルフォントを作成する手順をまとめると、
1. 図案を決め、紙に下書き
2. 下描きした図案をスキャンしトレースし、AIファイルで保存
3. AIファイルをフォント作成ソフトに読み込ませフォントデータ化
というものでした。

流れについては、
フォントの作り方(3)〜Fontographerの使い方(前編)〜
フォントの作り方(4)〜Fontographerの使い方(中編)〜
でも解説しています。

 

ただ、小文字デザインの設定が必要

上に説明したとおり、アルファベット・フォントのデザインは、大文字だけの時も小文字も含めての時も、その流れは変わりません。ただ、作業それぞれの段階で、「エックスライン」を設定する必要がります。
まず、図案を決め、下書きをする段階で、エックスラインを設定します。この設定によりエックスハイトも決まるので、トレースしてAIファイルを作成する際にも、フォント作成ソフトに読み込ませる際にも、エックスハイトを反映することとなります。
詳細は次回。

 

まとめ

・アルファベット小文字デザインには「エックスライン」が不可欠
・大文字だけの時も小文字を含めての時も、アルファベット・フォントのデザインの流れは変わらない
・小文字をデザインするなら、作業それぞれの段階で「エックスライン」を設定すべし

ではまた!

こんにちは。ANGEL VIBESです。このあたりで、フォント作成ソフトを使う際の「メトリクス」のことについて解説しておこうかと思います。実は、従来からあるレタリングなどにおいての尺度についての呼び名と、フォントデザインソフトにおいての尺度についての呼び名は、同じ名前を用いられながら厳密には意味が異なる場合があります。フォントやタイポグラフィの知識が少しでもある方は、ソフトを使ってフォントをデザインした時に混乱してしまったのではないでしょうか。
もしそんなことになってしまっていたら、基礎知識として読み返してみてください。

 

メトリクスとは?

辞書にも載っていますが、「メトリクス」とは要するに尺度や測定情報のことです。フォントをデザインするには、アセンダーライン、ベースライン、ディセンダーラインなど、一定のフォーマットに落とし込むための設計用のラインが必要です。そして、そのラインとラインの間には「アセンダー」や「ディセンダー」のようにそれぞれの箇所に名前がついています。フォントデザインの過程では、そういったそれぞれの箇所の寸法を測定することも必要な作業です。
アセンダーやディセンダーの測定はFontographerやGlyphs Miniの解説の際にも出てきましたね。こうした測定情報について、Fontographerでは「メトリクス情報」としてまとめられ、数値を入力して設定できるようになっていました。

 

尺度の名前は場面によって指す箇所が異なる

フォント作成ソフトのこうした「メトリクス情報」についてですが、フォントやタイポグラフィの知識が少しでもある方なら、既に少しばかり違和感があるのではないでしょうか? そのモヤモヤを、ちょっと解説しておきます。

従来のフォントデザインで用いられてきたそれぞれの名前に対応する測定箇所は、フォント作成ソフトにおいての箇所とは異なる場合があります。例えば「アセンダー」がそうですが、レタリングなどにおいての「アセンダー」とFontographerやGlyphs Miniにおいての「アセンダー」では、指している箇所が異なります。なぜそうなってしまったかは分かりませんが、アナログからデジタルにシフトする時には、何かしらの変容は起こり得ることです。
とりあえず言えることは、それぞれの名前に対応する測定箇所は、フォント作成ソフトでいうもの・従来のフォントデザインやタイポグラフィでいうもの、両者で異なっている場合があるので、別々のものとして考えた方が良いということです。

 

欧文書体設計のためのライン

従来の欧文書体設計のためのラインについて紹介しておきましょう。フォント作成ソフトのメトリクス情報のルーツは、それでもここから始まっていますので。
「欧文書体設計のためのライン」とは言いましたが、レタリングの古い教科書では「モデュールのためのライン」などとして紹介していたりもします。

 

従来の欧文書体設計のためのライン

 

Fontographerはこのような仕様でしたね。

Fontographer画面

お気づきかと思いますが、従来の欧文書体設計のためのラインとはアセンダーの位置が違います。

 

Gliphs Miniではこんな設定をしました。

Glyphs Mini画面

Glyphs Miniでも、emスクエアの高さであるユニット数は、アセンダーとディセンダーの合計となっていますね。

 

emスクエアの設定のズレ

 

Fontographer画面・ソフト付属のサンプルフォントの例

そして上は、Fontographer4.1Jに付属のサンプルフォントです。

このFontographer4.1J付属のサンプルフォントを見ると、アセンダーラインとディセンダーラインの位置がグリフのアウトラインから少し離れてます。従来の「欧文書体設計のためのライン」においては、グリフのアウトラインの天地は、アセンダーラインとディセンダーラインとに重なっていましたね。こうして見ると、両者でのアセンダーラインとディセンダーラインの位置もやや差があります。これは、emスクエアの設定も同一とはいえないということを示しています。
なお、タイポグラフィの古い教科書では、電算写植の文字は仮想ボディよりも「やや小さめに収まっている」という記述もあります。(「文字のデザイン」/馬場雄二・東京デザイナー学院出版局)
作り方によってはグリフのアウトラインの天地をアセンダーラインやディセンダーラインにぴったり重ねることも理論的には可能ですし、実際にそのように作られたフォントはあります。とはいえ、電算写植が流通しはじめた頃には、文字が仮想ボディよりも小さめにデザインされたものも開発されています。このようにデジタルフォントでは、文字をemスクエアのような仮想ボディの天地よりも内側にデザインするという設計も一つの流れとして存在しています。

 

emスクエアとはそもそも?

emスクエアとは、フォントをデザインする際の正方形の仮想ボディです。「em」は「エム」と読みます。ローマ字の「M」ですね。活版印刷の活字「M」のボディが正方形に近い形の金属の塊だったことに由来します。今では仮想ボディを意味して「emスクエア」と呼ばれることが多いです。
仮想ボディとは、フォントをデザインする時に「この四角い枠の中に収まるように設計しましょう」という約束事のラインと考えておけば良いでしょう。油絵などを描く時に四角いキャンバスがあるように、グリフ一つ一つにも四角形の枠がある、というようなことです。

 

まとめ

・「アセンダー」はレタリングの場合とFontographerなどの場合とでは、指している箇所が異なる
・「emスクエア」はレタリングの場合とFontographerなどの場合とでは、必ずしも同一の意味を示さない

ではまた!