こんにちは。ANGEL VIBESです。フォントデザインにご興味をお持ちの皆さんは、タイポグラフィについてもご興味をお持ちになるのではないでしょうか?
「タイポグラフィ」は簡単に言ってしまえば、文字や文字周りのデザインですが、そもそも、グラフィックデザイン全般において重要な要素となっています。今日はタイポグラフィのお話をしておこうかと思います。

 

タイポグラフィとは?

「タイポグラフィ」(typography)とは、「日本大百科全書」によれば、「印刷物の体裁に影響を及ぼす、文字の書体、大きさ、配列のしかたなど、視覚効果の総称。」です。最初に言ったように、文字や文字周りのデザインと考えて差し支えないでしょう。書体そのもののみならず、文字のレイアウトも含み、「字詰め」や「行間」の調整もその要素です。
文字を含むグラフィックデザインのジャンルであれば、タイポグラフィは避けて通れません。フォントデザインやロゴデザインの、文字そのもののデザイン、また、パッケージデザインの商品名、エディトリアルデザインの文字部分・・・、文字はグラフィックデザインの様々なジャンルのデザイン要素となっています。グラフィックデザインはタイポグラフィ抜きに語れないのです。
それを考えれば、タイポグラフィを制すればグラフィックデザインをも制することができる、と言えるわけです。

 

タイポグラフィの基本

タイポグラフィ、つまり文字周りのデザインについてですが、基本中の基本だけのお話にしておきます。なぜかというと、デザインに正解はない、というのが私のデザインについての考え方なので。時代とともに正解を新しく考案していくのがデザインとも言えるでしょうし。デザインツールの使い方と異なり、私が考えている「こうあるべき」というデザインの理想を誰かに押し付けることには、ほとんど意味がないでしょう。
そんなこともあるので、基本中の基本だけのお話にしておきます。

・文字の大・中・小のメリハリをつける
・本文の文字の平均的な大きさの目安は9ポイント(約13級)
・本文の1行に入る文字数のMAXは32文字
・本文の行間の平均的な大きさは文字の大きさの1.5倍程度
・適切な書体を選ぶ
・適切な字詰め行間の調整をする
・若い層向けなら本文小さめ・字詰めキツキツでOK
・中高年層向けなら本文は平均の大きさ以上・字詰めはキツくしすぎない
・まずタイトル周りのデザインをしっかり決めてしまう
・なるべく読みやすい字切りにする

タイポグラフィで注意する基本項目はこんなところです。

上記項目について、詳細を解説したいと思いますが、いきなり理論に行くのはやめておきましょう。理論通り作業したからといって、デザインがうまくいくわけでもないですから。
それよりも、資料集め兼がね遊びに行きましょう!

 

資料集めに出かけましょう

デザインで何が大事かというと「カッコイイ!」とか「カワイイ!」とか、そういったワクワク感だと思います。そういった感覚的な何かが伝わるデザインは、生き生きして見えます。まずは、自分の感覚というものを確かめる作業をしてみましょう。
では、自分の感覚を確かめるには? となりますが、まず、気になったタイポグラフィのコレクションをしてみましょう。もう、遊びのつもりでOKです! 遊びの感覚で資料集めに出かけてみましょう。
資料集めなら、インターネットでも良いしピンタレスト巡りをしてピンをして回っても良いですが、お散歩がてらあるいはウィンドウ・ショッピングがてらでも構いません、外出をおススメします。
デパート等の好きなショップに行ったりすると、偶然素敵なカタログやリーフレットに出会えたりするものです。気に入ったものはいただきましょう。もちろん万引きはいけませんが、「自由にお持ちください」という無料のカタログ等も置いてありますので。
野外の看板等の写真を撮って回るのも面白いですよ! 世の中、変テコリンなデザインの何かが結構あるもので、普段見過ごしていたりもします。歩いていると、そういったデザインに気づいたりして、驚きがあります。
そんな感じで自分のコレクションが出来て行くわけですが、そういったことをしているうちに、自分の感覚が解って来ます。自分のデザインの理想はこんなかんじだなあ、と。そして「こんなデザインがしたい」と思い理想を形にする時、「本文って通常どれくらいの大きさなのだろう」などと気になる部分が出てくるかと思います。その時、先ほどあげた、タイポグラフィで注意する基本項目をチェックしてみても遅くはありません。
肩の力を抜いて、ラクに楽しく行きましょう。タイポグラフィは本来面白いものなのですから。

先日筆者が観に行った「ベルギー奇想の系譜展」のショーウィンドウ
メリハリが効いたタイポグラフィですね!

 

ショーウィンドウの隅っこにはこんな子が! シャレてますね!

 
続きは次回。

 

まとめ

・タイポグラフィとは文字や文字周りのデザインのこと
・タイポグラフィはグラフィックデザインの重要な要素
・まず、気になったタイポグラフィのコレクションをしてみましょう

ではまた!

こんにちは。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です。前回はアルファベット・フォントの大文字に加え小文字もデザインする際には、作業それぞれの段階で「エックスライン」を設定する必要がある、というところまでお話しました。では今回は、小文字のデザインについて、それぞれの段階での「エックスライン」の設定をふまえた説明をしていきたいと思います。私がデザインしたフリーフォント「Alfalfa」を例にしてみます。

「Alfalfa」というオリジナルフォントです

画像出典:「ANGEL VIBES」サイト

 

デザイン決め〜下描き

前回の説明ではHelveticaの例をお見せしました。例を参考に、エックスラインはだいたいこの位置で、グリフそれぞれの部分によっては高さを揃えれば良いんだな・・・ということをちょっと頭の片隅においていただければと思います。そうしてデザインしていれば、統一感は自然と出て来ますよ。

デザイン決めの段階では、注意するのはそれぐらいです。

デザインが決まったら下描きをしていきますが、これは以前にも説明したとおり、「下描き用紙」に下描きします。この下描きが次の作業で下絵となります(詳細は、「フォントの作り方(3)」で説明しています)。
なお「下描き用紙」は、ANGEL VIBES オリジナルのものもありますので、こちらからダウンロードして使っていただいて構いません。
下描きの仕方は以前説明したとおり、デザインしたラフを「下描き用紙」に書き写していけば良いのですが、小文字をデザインするなら、まずこの段階でエックスラインの設定が必要となります。この段階でエックスラインの位置を決めてしまい、エックスラインに高さを揃える箇所はしっかり揃えましょう。

「Alfalfa 」はこんな感じで下描きしました。

 

下描きでもエックスラインに揃えるべき箇所は揃えます。

 

次は下描きをスキャニングしAdobe Illustratorでトレース

下描きした後は、下描きした下絵をスキャニング→AIドキュメント「トレース用紙.ai」上に下絵を配置→トレースして保存、という手順となります。これは「フォントの作り方(4)」で説明したとおりです。
なお「トレース用紙.ai」は、ANGEL VIBES オリジナルのものもあります。というか、おそらくどこにも売っていないと思います。私的に使うのは無料なのでこちらからダウンロードして使っていただいて構いません。

 

「Alfalfa」はこんな感じでトレースしました。

「Alfalfa」大文字
「Alfalfa」小文字

 

Glyphs Miniを使った作業の流れ

ここからは、トレースしたAIデータを一つ一つコピー&ペーストして拡大→グリフ一つ一つをAIデータとして保存→フォント作成ソフトに読み込ませる、という作業の流れです。「Alfalfa」はGlyphs Miniで作成しましたので、Glyphs Miniを使った作業の流れを説明します。

「フォントの作り方(10)」で説明していますが、次は、「トレース用紙.ai」ドキュメント上でトレースしたグリフ一つ一つに四角い囲みを印としてつけ、そのグリフを印と一緒に1,000×1,000ポイントのドキュメントの「元AI用紙.ai」に、コピー&ペーストして拡大し、グリフ一つ一つをAI形式で保存します。保存の際は別名保存し、「元AI用紙.ai」の名前ではなく、グリフ名をつけて保存してください。
こうして、「元AI」のフォルダに「A.ai」、「B.ai」、「C.ai」、・・・とグリフ一つ一つのAIデータが揃うことになります。なお、このグリフ一つ一つのデータは、「元AI」と呼んでおきましょう。

ここまでは「フォントの作り方(10)」で説明したとおりです。ただ、小文字もデザインする時は、「元AI用紙.ai」でエックスラインを設定することになります。

「Alfalfa」の例で説明すると、「トレース用紙.ai」上では、ベースラインからエックスラインまでの高さは37mm(エックスハイト)に設定しました。グリフそれぞれのエックスラインに合わせるべき箇所はその高さに合わせています。
そして、四角い囲みの印は「トレース用紙.ai」上のグリフでは75×75mm(「Alfalfa」では75mmの正方形にしましたが、だいたいそれくらいの大きさということで、厳密に75mmでなければならないということではありません)に設定しています。
次の作業では、この印とトレースしたグリフを一緒に「元AI用紙.ai」にペーストしますが、小文字をデザインする場合は、「元AI用紙.ai」にキャップライン、エックスライン、ベースラインをガイドラインとして描いておきます。
75mmを1,000ポイントに拡大する前提で比率を合わせれば良いわけだから、「トレース用紙.ai」上でのキャップハイトは50mmなので、「元AI用紙.ai」上では666.665ポイント(約666ポイント)となります。そして、エックスハイトは37mmなので、同比率で拡大すると493.355ポイント(約493ポイント)となります。
ペーストしたら、印の四角形(75×75mm)とグリフを一緒に拡大し1,000×1,000ポイントのドキュメントの四隅に合わせます。比率の計算が間違ってなければ、それぞれ、キャップライン、エックスライン、ベースライン、に重なるべき箇所は、ピッタリ重なるはずです。

 

「トレース用紙.ai」上のグリフは「Alfarfa」ではこんな感じで囲みの印をつけました

 

「元AI用紙.ai」上にペーストして拡大するとこんな感じ

 

「元AI用紙.ai」にキャップライン、エックスライン、ベースライン、をガイドラインとして描いておくのは少々面倒かもしれませんが、これを行っておけば、次の作業でGlyphs MiniにAIデータを読み込ませる時にスムースです。
その理由については、また次回。

 

まとめ

・小文字もデザインするなら、図案を決めるときにエックスラインを意識する
・下描き〜トレースの段階ではエックスラインを決めて作業
・「元AI用紙.ai」にはキャップライン、エックスライン、ベースラインをガイドラインとして描いておく

では、また!

こんにちは。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に配置することができましたね。そこまでできたら、次はスペーシングとカーニングです。そして、フォントファイルを書き出したら完成となります! さあ、あとひとふんばりです。

 

[9]スペーシング

Glyphs Miniではスペーシングは1文字ずつ行います。グリフを並べて表示し、Adobeのドローソフト等で字詰めを行う感覚でスペーシングができます。
少し復習します。スペーシングとは、一つのグリフが占有する字幅の調整のことです。先ほど、グリフ一つ一つの字幅の設定をしましたね。これにより、グリフの四角いガイドラインの幅を調整できたと思います。実はこれが、一つのグリフが占有する字幅となります。
Glyphs Miniでは、こうした字幅は、文字のアウトラインの端からガイドラインの端までの距離の数値を入力することによっても、調整することができます。これは、字幅の設定を行ったのと同じ画面下のグレーのボックス、「左」「右」の数値部分に数値を入力することで行います。なお、「左」は文字のアウトライン左端からガイドラインの左端までの距離、「右」は文字のアウトライン右端からガイドラインの右端までの距離を示しています。

字幅の設定はグレーのボックス「左」「右」で調整することもできます。

Gliphs Mini画面

 

画面上部のツールボックスから「T」(テキストツール)を選びます。文字を打ってみましょう。すると画面上に文字が表示されます。この文字は並べてスペーシングを行うことができます。順番としては、まず平均的な字形を選び、それから○に近い字形を選び、そして「I」を選び、バランスを見ながらそれぞれのスペーシングを行っていきます。
見本のフォントDaisyの例では、文字の平均的なフォルムは四角形なので、四角いフォルムの「H」、「N」、「Z」から始めました。そして「O」、「I」と続け、バランスを見ながら調整していきました。

Glyphs Mini画面

 

Glyphs Miniではグリフ名を利用してスペーシングを行う便利な方法があります。基準にしたグリフ名を利用して他のグリフをスペーシングすることができます。例えば、「H」を基準にした場合、同一のスペーシングをしたいグリフを表示し「左」に「H」、「右」に「H」と入力すれば、「H」で設定した時と同一の数値が入力できます。
なお、その基準となるグリフの数値を変更したときは、ツールバー「グリフ」→「メトリクス情報を更新」を選びます。これを実行しないと、他のグリフにその変更した数値が反映されません。

「N」のスペーシングを「H」と同一にしました。

Glyphs Mini画面

こんな感じでグリフを表示し、調整していきます。

Glyphs Mini画面

全体を調整できたら、スペーシングは完成です。

 

[10]カーニング

カーニングもまた、スペーシングを行ったのと同じ、画面下のグレーのボックスで調整して行います。スペーシングの数値を入力する下の行です。
少し復習します。カーニングとはグリフとグリフの間隔の調整のことです。ある特定のグリフとグリフを並べた時の字詰めが美しくない場合に、グリフとグリフの間隔を詰めるなどの調整をします。それがカーニングです。
カーニングを設定するのは、気になるグリフだけでOKです。Daisyの例では、「OとV」、「OとW」、「OとY」、「Oと7」、「VとO」、「VとY」、「YとO」、「YとV」それぞれのペアについて行いました。
カーニングもスペーシングのように、基準にしたグリフ名を利用して他のグリフをカーニングすることができます。
実際に、「YとV」のペアと「YとW」のペアを同一のカーニングにした例です。
まず、「V」のカーニング「左K」には「-8」と入力し、「左G」の欄に「V」と入力しました。「左K」は字詰めをする数値で、「左G」はカーニンググループ名です。そして、同一のカーニングにしたい「W」の「左G」に「V」と入力することにより、「YとV」と「YとW」のカーニングを同一にすることができました。
右のカーニングも必要な箇所は、この方法で、「右K」に字詰めの数値、「右G」にグループ名を入力し、それぞれのグリフの間隔を調整します。行ったカーニングは、メニューバー「ウィンドウ」→「カーニング」で内容を表示させることも可能です。
なお、カーニングにおいてもスペーシングと同様に、基準となるグリフの数値を変更したときは、ツールバー「グリフ」→「メトリクス情報を更新」を選びます。これを実行しないと、他のグリフにその変更した数値が反映されません。

「YとV」のペアと「YとW」のペアを同一のカーニングにした例

Glyphs画面
Glyphs画面

 

[11]出力をしてフォントファイルを書き出し完成!!

スペーシングとカーニングはこれでOKです。それができたら、メニューバーから「ファイル」→「出力」を選び、ファイルを書き出します。これで、完成です。やりましたね!

 

まとめ

・スペーシングとカーニングは画面下のグレーのボックスで行う
・カーニングは気になるグリフのペアだけ行えば良い
・フォントファイルを書き出して完成

こんにちは。ANGEL VIBESです。前回はGlyphs Miniを立ち上げ、「フォント情報」を設定するところまでできましたね。今日は、「元AIデータ」を、Glyphs Miniに読み込ませる作業を中心に解説します。

 

[6]続いて「出力」の設定

Glyphs Miniを立ち上げ、「フォント情報」を設定したら、次に「出力」を設定します。メニューバーから「ファイル」→「出力」を選び「重なったパスを合体」がチェックされているかを確認します。デフォルトではチェックになっていますが、念のため確認しておきましょう。
これがチェックされていることにより、フォントファイルを書き出す際に、開いたパス・重なったパスやポイントを合体することができます。Fontographerの使い方でも説明しましたが、パス上の余分なポイントはなくし、開いているパスは繋ぎます。フォントファイルを作る時にはグリフのアウトラインは整理しなければなりませんでしたね。

Glyphs Mini画面

グリフ一つ一つの画面を開いて、「重なったパスを合体」を実行することもできます。重なったパスやポイントは、オレンジ色の●で示されます。メニューバーから「フィルター」→「重なったパスを合体」を選んでいただければ、合体が実行され、オレンジ色の●は消えます。
ただこのように一つ一つのグリフの画面でやらなくても、「出力」で「重なったパスを合体」をチェックしてさえいれば、フォントファイルを書き出す際に、一括して「重なったパスを合体」が実行されます。

Glyphs Mini画面

 

[7]グリフ一つ一つの画面に「元AIデータ」をペースト

各設定ができたら、最初の画面に戻ります。「A」、「B」、「C」、「D」・・・と続くマス目がありますね。このマス目を一つずつダブルクリックしグリフ画面を開きます。画面下のグレーのボックスで、「字幅」に「1000」と入力します。そうすると、グリフ画面の四角いガイドラインの幅が1,000ユニットになります。
この四角いガイドラインですが、高さはemスクエアの高さを示しています。すでに述べていますが、emスクエアの高さはGlyphs Miniではユニット数(UPM)で表されます。そして、Glyphs Miniの仕様ではemスクエアの高さ=ユニット数(UPM)は1,000となっています。なので字幅を「1000」と入力すると、1,000×1,000ユニットの正方形のガイドラインができますね。

次に、「元AIデータ」をGlyphs Miniに読み込ませる作業です。
「元AIデータ」をAdobeIllustratorで開き、位置合わせの印とグリフとを一緒にコピーし、
Glyphs Miniのグリフ画面にペーストします。そして、その1,000×1,000ユニットの正方形のガイドラインに位置を合わせます。
「元AIデータ」は1,000×1,000ポイント=1,000×1,000ユニットのドキュメントで作りましたので、位置合わせが正しく行われれば、グリフの画像はアセンダーライン・ディセンダーライン・ベースラインの正しい位置に収まります。
なお、ガイドラインに位置合わせ用の印の四角形がピッタリ重なれば、オレンジの◆が示されます。うまく重ならなければ、グリットが見えるまで拡大して、画像を重ねるようにしましょう。

マス目をダブルクリックしてグリフ画面を開きます

Glyphs Mini画面

下のグレーのボックスで「字幅」を設定します。

Glyphs Mini画面

ペーストした画像をガイドラインにピッタリ重ねるとオレンジの◆が示されます。
難しければ、グリッドが見えるまで拡大して重ねましょう。

Glyphs Mini画面

位置合わせはできましたか? これができたら位置合わせ用の四角形は不要になります。四角形のパスをダブルクリックして選択し、deleteキーで消去します。

 

[8]数字と役物を「グリフ情報」で追加

Gliphs Miniに「A」から「Z」までAIデータをペーストし、位置合わせをし終えましたか? それが終わったら、次に数字や約物の作業です。タブ「フォント」から「数字」「約物」を選び、マス目の画面を表示し、「A」から「Z」で行ったのと同じようにAIデータをコピー・ペーストしていきます。
でも、アレっ? 数字がない、約物がない! ってなりましたね? そうなんです。作成できるグリフは、デフォルトでは「A」から「Z」の大文字・小文字しか設定されていません。「フォント」タブからカテゴリーの「数字」を選び表示してみるとカラになっていて、グレー一色の画面になっています。数字と役物も作りたい場合は、メニューバーから「ウィンドウ」→「グリフ情報」を表示し、作りたいグリフを選択し右下の「フォントに追加」ボタンを押していきます。数字なら、「0」、「1」、「2」・・・と加えていきましょう。すると、加えたグリフのマス目ができあがります。
もう一度カテゴリー「数字」を開いて確認してみましょう。「0」から「9」のマス目ができあがってますね。マス目ができたら、また「A」から「Z」まで作業したのと同じように、AIデータをコピー・ペーストし、位置合わせをします。

「グリフ情報」からフォントを加えていきます。

Glyphs Mini画面

これが

Glyphs Mini画面

こうじゃ!

Glyphs Mini画面

全ての作りたいグリフのデータを、Gliphs Miniに読み込ませましたか? この作業ができたら、次はスペーシングとカーニングです。

 

まとめ

・「ファイル」→「出力」を選び「重なったパスを合体」をチェックすべし
・グリフのAIデータは位置合わせの印と一緒にGliphs Miniにコピー・ペーストする
・作成可能なグリフはデフォルトでは「A」〜「Z」の大文字・小文字のみに設定されている
・「A」〜「Z」以外の作りたいグリフは「グリフ情報」で追加

ではまた!

こんにちは。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の時と同様
・「グリフ」とは、特定のフォントにおける個々の文字の字形

ではまた!