こんにちは。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などの場合とでは、必ずしも同一の意味を示さない

ではまた!

こんにちは。ANGEL VIBESです。前回は、「グリフ」の説明をしているうちに終わってしまいました。Glyphs Miniの使い方に話を戻しましょう。フォントのデザインを決めて下描き〜AdobeIllustratorでトレース、ここまではFontographerを使う時と同じでしたね。忘れた部分があったら、過去記事「フォントの作り方(3)」フォントの作り方(4)」を読んでみてくださいね。
さて、あなたの手元にはグリフをトレースしたAIデータ「トレース用紙.ai」が用意できていますか? 今日はここからのお話です。

 

[4]トレースしたAIデータを「元AI用紙」に1文字ずつ保存します

FontographerにAIデータを読み込ませるためには、トレースしたAIデータを「元AI用紙.ai」にコピー・ペーストしグリフ1文字ずつを保存した、「元AIデータ」を用意しなければなりませんでしたね。「元AI用紙.ai」には印がついており、この印によって、Fontographer上で全てのグリフのemスクエアの高さを統一することができました。

AI形式のドキュメント「元AI用紙」から作成した「元AIデータ」


Glyphs MiniでもFontographerの時と同様に、Giyphs Mini上にペーストされるグリフのemスクエアの高さは統一されなければなりません。その他Glyphs Miniでは、ペーストされるグリフは画面の正しい場所に位置合わせをされなければなりません。なので、Glyphs Miniの仕様に合わせた「元AI用紙.ai」が必要です。
なお、Glyphs Miniではemスクエアの高さには「ユニット(UPM)」という単位が割当てられています。Glyphs Miniの仕様では、1つのグリフのemスクエアの高さ=1,000ユニット(UPM)となっています。「ユニット(UPM)」という単位については、今はこのことだけ覚えておいていただければ良いでしょう。

Glyphs Miniの画面。グリフのマスの高さは1,000ユニット(UPM)です。

Glyphs Mini画面

では、AI形式のドキュメント「元AI用紙.ai」を使い、「元AIデータ」を作ります。
まず、「元AI用紙」の作り方です。1,000ユニット(UPM)はAdobeIllustrator上では1,000ポイントと同一の大きさです。なのでまず、1,000ポイントの高さのドキュメントを作ります。とりあえず1,000×1,000ポイントの正方形にしておきましょうか。そしてそのドキュメントに合わせ、1,000×1,000ポイントの正方形をラインで描いておきます。これは位置合わせ用の印なので、Glyphs Mini上で位置合わせをした後に消去します。これで「元AI用紙.ai」ができました。
次に、「トレース用紙.ai」上でトレースされたグリフ一つ一つを四角形のラインで囲み、印をつけます。emスクエアの高さが四角形の高さとなるように、一つ一つの四角形の位置と大きさを統一してください。
あとは、そのトレースしたグリフを四角形の印と一緒に「元AI用紙.ai」にコピー・ペーストし、高さが1,000ポイントになるよう拡大します。そして、1文字ずつAI形式で保存します。「元AI」などの名前のフォルダを作り、この中にそれぞれのグリフを「A.ai」「B.ai」「C.ai」・・・と保存していきましょう。

 

「トレース用紙.ai」のグリフ一つ一つに印として四角形の囲みをつけます。

 

「元AI用紙.ai」に、グリフを四角形の印と一緒にコピー・ペースト。
ペーストした画像は拡大し、4隅の位置を合わせます。

 

[5]Glyphs Miniを立ち上げたらまずは「フォント情報」の設定

さて、いよいよGlyphs Miniを使っての作業です。Glyphs Miniを立ち上げたら、メニューバーから「ファイル」→「新規」を選び新規のドキュメントを開きます。そして「ファイル」→「フォント情報」を選び各項目の設定をします。Fontographerを使用する場合も同じでしたね。新規のドキュメントを開いたら、まずは「フォント情報」の設定です。

「ファミリー名」の設定
フォントファミリーの名前を入力します。自由に名付けてください。次の項目「スタイル名」はデフォルトで「Regular」となっています。フォントファミリーを増やさないなら、「スタイル名」はデフォルトの「Regular」のままでOKです。

クレジット関連情報の設定
クレジット関連では「デザイナー」「デザイナーのURL」「製造者」「製造者のURL」「著作権」があります。デフォルトでは空欄になっていますので、各項目に入力しましょう。

「バージョン」の設定
デフォルトでは「1.000」となっています。そのままで大丈夫です。フォントをリ・デザインするなどした時はバージョンアップすると良いでしょう。

メトリクス関連情報の設定
「ユニット数(UPM)」「アセンダー」「キャップハイト」「xハイト」「ディセンダー」「イタリック角度」の設定です。
「ユニット数(UPM)」はデフォルトのまま「1000」でOKです。既に説明しましたが、Glyphs Miniでは一つのグリフのユニット数は仕様で1,000となっているので、よほど理由でもない限り、1,000のままで大丈夫です。
「アセンダー」と「ディセンダー」ですが、「元AIデータ」を見れば簡単ですね。ドキュメントサイズを1,000ユニット=1,000ポイントに設定してあるので、そのまま「アセンダー」と「ディセンダー」の高さを測って入力しましょう。AIドキュメント上で端数が出ていたら、切り捨てるなどして調整しましょう。ただし、「アセンダー」と「ディセンダー」の高さの合計は1,000になるようにします。

過去記事「フォントの作り方(5)」を復習しますね。

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

これだけは覚えておきましょう。

「キャップハイト」「xハイト」「イタリック角度」はデフォルトのままで差し支えありません。
ここまで入力できたら「アラインメントゾーン」の矢印ボタン(赤いマイナスボタンの右隣の黒いボタン)を押します。こうすることで、位置とサイズが自動計算されます。

Daisyはこんな感じで設定しました。

Glyphs画面

これで「フォント情報」は設定できました。続きはまた次回。

 

まとめ

・Glyphs Miniの仕様では、1つのemスクエアの高さ=1,000ユニット(UPM)
・AdobeIllustrator上では、1,000ユニット(UPM)=1,000ポイント
・emスクエア(の高さ)=アセンダー+ディセンダー
・Glyphs Miniを立ち上げたら「フォント情報」で必要事項を入力する

ではまた!

こんにちは。ANGELVIBESです。今日はGlyphs Miniを使ったオリジナルフォントの作り方のお話です。前回のおさらいをちょっとしますね。
Glyphs Miniには日本語版があり、しかも価格が5,000円程度。なのに基本的な機能はそろっている。なので、フォントデザインビギナーさんにはGlyphs Miniが一推し! というお話をいたしました。
というわけで、今日からGlyphs Miniの使い方編をスタートしたいと思います。見本のフォントはFontographerの解説の時に使用したDaisyです。同じフォントにしておいた方が、混乱はしないかと思いますので。

今回もDaisyを見本にします

画像出典:「ANGEL VIBES」サイト(http://www.auracommunications.com/angel/frfnt/daisy.html)

 

フォント作成の手順はFontographerと基本的に一緒でOK

Glyphs Miniを使ったフォントデザインの基本的な手順は、Fontographerと同様です。ただ、やはりGlyphs MiniとFontographerは別のソフトなので、ソフトの細かい部分での使用方法や設定方法は異なります。でも、使ってみると共通項があるということは発見できるかと思います。
Glyphs Miniを使う場合も、Fontographerを使う場合とおおまかな手順は変わりはありません。したがって、Glyphs Miniの場合も、次のような手順となります。

1. 図案を決めます。
紙に手書きでラフデザインを描きます。デザインがまとまったら、下描き用紙に書き写します。
復習します。「下描き用紙」って何でしたっけ? 専用の方眼紙でしたね。ANGEL VIBESオリジナルの用紙を使っていただいてもOKです。→無料ダウンロードはこちら☆

2. 下描きした図案をスキャンしトレースします。
下描きした図案をスキャナーでスキャンします。これを下絵にしてAdobeIllustratorでトレースします。トレースした画像はAIファイルで保存します。文字のベースはこれで完成です。

3. AIファイルをGlyphs Miniに読み込ませフォントデータ化します。
AdobeIllustratorで作成した文字のベースとなるAIファイルを、Glyphs Miniに読み込ませます。AdobeIllustrator上で画像をコピーし、Glyphs Miniの所定のマス目に1画像ずつペーストしていくイメージです。ペーストができたらカーニング設定等の行程を経て、フォントデータを書き出し完成します。

このように、手順はFontographerとおよそ変わりません。特に手順「2」の途中までは同じです。Glyphs Miniを使用する場合でも、ラフデザインを下描き用紙に書き写し、この下描き用紙をスキャンしてAdobeIllustratorでトレースするところまでは同じです(「フォントの作り方(3)」「フォントの作り方(4)」)。

過去の記事「フォントの作り方(3)〜(4)」でいうと、
[1]下描き用紙に図案を描く
[2]スキャナーで下絵をスキャンし一文字ずつ切り分ける
[3]AI形式のトレース用紙を使いAdobeIllustratorで1文字ずつトレースします

というところまでは同じなので、説明は省きます(ちょっと忘れちゃったなあということでしたら、戻って復習してみましょう)。この後から、少しずつ異なる手順があります。では次の手順を[4]として、そこから説明をします。

 

下描き用紙に図案を描いて、スキャナーでスキャンします。

 

スキャンしたデータを切り分け、
AIドキュメントの「トレース用紙」に1文字ずつ配置し下絵にします。

 

下絵を元にトレース。ここまでは同じ。

 

「グリフ」とは?

いきなりで恐縮しますが、[4]の説明に入る前に「グリフ」とは何か? というお話です。ちらりちらりと「グリフ」という単語が出てきていますが、重要な用語の一つなので念のため説明しておきますね。
「Weblio 辞書 」→「.NET Framework用語集」の「グリフ」の項目を見てみましょうか。
「グリフ」とは「特定のフォントにおける文字の物理表現。」と記されています。「グリフ」という単語は使用する場によって意味が多少異なり、定義が定まっていない印象も受けますが、コンピュータの用語、特にフォントと対峙する概念として考えた時、次のような意味となります。「グリフ」とは個々の字形。付け加えると「フォント」はその集合、という意味になります。Gliphs Miniでいえば、画面にA、B、C・・・と続く一つ一つの文字の形ですね。

画面にグリフが並んでいますね

Glyphs Mini画面

いきなり「グリフ」の説明が入ってしまいましたが、次回は、トレース用紙でトレースしたデータを使った次の過程についての解説です。

 

まとめ

・Glyphs Miniを使ったフォント作成の基本的な手順は、Fontographerと共通点が多い
・下絵をトレースするところまでの手順はFontographerの時と同様
・「グリフ」とは、特定のフォントにおける個々の文字の字形

ではまた!

こんにちは。確定申告を終えてホッとしているANGEL VIBESです。ところでFontogrpherは入手できましたか? すでに述べていますが、FontLab社の公式サイトで購入はできますが、日本語版の販売は終了しています(日本では恒陽社がFontLab社の代理店となり、日本語版を販売していました)。・・・う〜んやはり、日本語版が欲しい方もいらっしゃいますよね。
なんてことを考えると、オリジナルフォントデザインのビギナーさんにフォント作成ソフトをオススメするというなら、確かにGlyphsは一推しなんですよ。日本語版がありますし、それでいて多機能で柔軟性があり、優れたソフトだと思います。そしてGlyphs Miniなら5,000円程度でフォント作成ソフトとしては低価格。Glyphsよりも機能が少ないながらもこちらも超オススメ!
というわけで、フォント作成ソフトを新しく導入したい方で特にフォントデザインビギナーの方のために、今日はGlyphsについてお話しようと思います。

 

Glyphsの歴史

Glyphsといったら、発売された当初から評判が良かったという印象です。日本では、既に2012年ぐらいにはネットでちょっとした騒ぎになっていました。フォントクリエイター達はWebを通し、口々に使いやすいと伝えていました。
そうしたメディアによれば、Glyphsの日本語版は2013年頃にリリースされたようです。ヤマダコウスケさんの「フォントブログ」にも解説があります。

さて、Glyphsっていつからあったの? ということについてです。Glyphsの前身となるソフトがあったのかどうかは調べかねてますが、Glyphs公式ハンドブックでの著作権表示が2011年からになっているので、「Glyphs」としての歴史は、2011年から始まっていると考えて差し支えないでしょう。とすると、Glyphsはかなり早い段階で、日本語版がリリースされたフォント作成ソフトだと言えるのではないでしょうか。

 

Glyphsの使いごこちは?

Glyphsの使いごこちは、一言で言うと、柔軟。「そこ! そこが気になってたの!」という部分の細かな設定が、かなり簡単に出来てしまう。例としてはグリフ一つ一つの幅設定。グリフのマスの幅のみならず、文字の左右にどれぐらいのスペースがあるかも数字で示され、画面で確認できます。私にはこれがインパクト大でした。それから、画面上のドローツールが感覚的で、デザイナーが使うにはラクだと思いました。慣れれば、AdobeIllustratorを使わずにダイレクトにGlyphs上で下絵をトレースする手順の方が、やりやすいかもしれません。とは言え、AdobeIllustratorのAIデータをコピー・ペーストする方法も可能なので、これも好きずきで選べば良いでしょう。
それから、リガチャーがずいぶん綿密に設定できるというのも良いです。デザインによってはリガチャーが細かに設定できればいいんだけどなあという場合もあります。リガチャーが綿密に設定できることによって、場合によってはデザインの可能性も広がるのではないかと思います。

こんな感じでドローができます

Glyphs画面

グリフのマス一つ一つの幅は数字を入力することで設定できます

Glyphs画面

 

ビギナーにも親切

GlyphsにはTrial版(体験版)があって30日間無料で使用でき、Glyphs公式サイトから入手できます。しかも、日本語版があります。フォント作成ソフト自体が、一体どんな使い勝手で見当もつかないというフォントデザインビギナーの方なら、助かるのではないでしょうか? そして、Glyphs最新版(バージョン2.3)のハンドブックは日本語版も用意されています。これなら、充分検討してから購入するかどうか決められますね。
それから、ビギナーにとってもう一つ嬉しいのは、公式サイトのトレーニングビデオです。全部見れば、Glyphsの使い方は、ひととおり知ることができます。

Trial版(体験版)は公式サイトからダウンロードできます

画像出典:Glyphs公式サイト

トレーニングビデオもありがたいです

画像出典:Glyphs公式サイト

 

まずGlyphs Miniを試すという手もある

Glyphsについて少しばかりご案内してきましたが、いかがでしたか? GliphsとGliphs Miniのお話を一緒に進めてきてしまいましたが、オリジナルフォントデザインをこれから始めようという方が新しくフォント作成ソフトを導入したいということなら、私はMiniの方をオススメします。
リガチャーなどの細かな設定ができることから察するに、Gliphs自体がプロからセミプロ向けのソフトと考えられます。細かな設定ができることはプロも嬉しいですが、ビギナーさんであればその細かさに少々混乱するかもしれません。それよりは、基本的な機能だけは搭載しているGliphs Miniでひととおり慣れていただいて、それからGliphsを導入するということでも遅くないと思います。何よりGliphs Miniの価格ですよ。5,000円程度で、あれだけの機能。損にはならないと思います。また、使用していただいて、もしMiniの方で充分だということなら、あえてGliphsは導入せずMiniを使い続けるという選択もアリだと思います。

さて次回から、Gliphs Miniを使ったオリジナルフォントの作り方についてお話したいと思います。

 

まとめ

・Glyphsは、正直言うと推しです。
・Glyphsには日本語版がある。
・Gliphs Miniの価格は5,000円で低価格。それでいて基本的な機能は備えている。
・ビギナーさんにはGliphs Miniがオススメ。

ではまた!