バリアブルフォント
「革新を、然らずんば死を」というのがどうもアドビチームのモットーらしいのだが、give me innovation or give me death で検索してもそれらしい話が出てこないのは、またしてもいいかげんなはなしを聞きかじっているだけなのか、単に探し方が悪いのか……むしろ、グーグル先生にlibertyと間違ってませんかとまで指摘される有様。いや、わかってやってんだからいいんだよ、パトリックの演説を聞きたいわけじゃないんだから……そういえば、日本でも板垣死すとも……の名台詞があるけど、あれ本人そんなこと一言も言ってないって話で……え？ 知らなかった？ あ〜、そうか〜、世の中知らないほうが幸せだったかもしれない話っていうのはあるから……今回の話もそうなってなきゃいいけど……。
さて、今回はAxis、つまりバリアブルフォントの本体部分ともいえる軸についての説明。本当はこっちを先に解説しておくべきだったんだけど、ざっくりした話は先にしておいたからまぁいいかなって感じだったんで、このように後回しにしました。今回はその辺りから。まぁ毎回同じサンプルだとこっちも飽きちゃうので、別のフォントを……って、どれにしよう……あぁこいつがあったか……。
まぁ、これも……いろいろ今イチで残念な感じ。何をしたかったんだかよくわからないくらいのフォント……ん〜、何したかったんだっけ？ まぁいいや、とりあえずこれを使って説明していこうか。
こんな感じに変化するのだけれどマスターレイヤーは極値……つまり、ステムの細いのと太いグリフの２枚だけ作って中間形を自動計算して出力している。レイヤーの話は前にしたので大丈夫だよね？ さて、Font infoのダイアログの中Axes, Masters, Instances を順に解説していこう。
Font infoはFontLabVIでフォントファイルを開いたらFileメニューの下のほうにあるFont info...ってなっているところか若しくは Option-command-F あるいは「 i 」って書いてあるアイコンをポッチって押すとか、まぁいろいろ呼び出し方があるので、そのあたりはご自由に。制作途中で行ったり来たりしなきゃいけないのでいろんなところから簡単に呼び出せるように配慮されているんだと思う。最初に開くと下の図のような感じ。
今回は、一番下のMaster nameのところの値だけが重要で、他はまぁどうでも良いわけではないけれど、今回の内容には関わらない。
それで、続けるけど、そういうことで、ここにマスターレイヤーの名前を指定するとそれがそのまま使われる。右の下のところでレイヤーを選んでそれぞれ、別の名前をつけよう。名前が被ってもFontLabが〜.1 、〜.2 、〜.3 みたいな感じに適当に振り分けてくれる。まぁようは、わかれば何でもいいんだけど、あんまり適当にしすぎると後で困ることになる。もっとも後からいくらでも変更は効くのでかまわないっちゃ構わないのだけれど……で、ここをチャンとしたら次に左のメニューのところからAxesを選択する。
このフォントではもう既にWeight……つまり、ステムの太さのところの軸が入っているけど、フォントを作り始めたばかりのときは、当然ここにはまだ何も入っていない。下の＋のボタンから追加する。いくつかの定義済みの軸からどれかを選択するか、「Custom」で、自分で軸を追加するかを選ぶ。定義済みの軸というのは、ウエイト（wght）、幅（wdth）、光学サイズ（opsz）、傾斜（slnt）、斜体（ital）で、この５つはOpenType 1.8で最初からきめられている。その他のコントラスト、セリフ、グレードなどはユーザーから要請されているというような感じのものなので、そのうち仕様に追加されるかも知れない…… まぁガチガチにキまっているわけではないので自分定義で勝手にしてもかまわないのだけれど、このあたり、あまり一般的で無いことをしようとすると、それを想定しているシステムの予測を超えてしまうので推奨はしない。まぁこのとおりにしておいたほうが、無難っちゃぁ無難。それ以外はご自由に。
カスタム軸を追加するときは、軸コード……これはFontLabが内部コードとして使うもので２文字、デフォルトでzzになっている。それと、軸タグの４文字でデフォルトでZZZZになっている。この２箇所は他と被らない固有のものに変更したことを必ず確認すること。これらを設定したらAppiyする……OK押しても同じだけど、ダイアログが閉じるので設定をつづけるためには、Font infoをまた開かなきゃいけなくなる。なので当然だけどAppiyしたらCancelできないからね。以上のところはフォントの VariationAxisRecord の axisTag 以下の内容と同等になるのだけれどまぁ、ダイアログでする分にはそのあたり自動でやってくれるのでプログラムの心配をする必要はない。
さて、ではこのAxesの中をもう少し詳しく。上の図の左から、軸の名前。そういえば VariationAxisRecord の axisNameID でアプリケーションユーザーインターフェイスで軸を参照する。 'name'テーブルから文字列を取得するために使用する名前のIDをもローカライズできるハズなのでそこにチェックが入れば日本語化が可能なはずだけど……ここへ直接入れると日本語通らないシステムを破壊しそうだなぁ……ちなみにプログラムに直接手で入力する場合は、 'name' IDは、255＜32768 の範囲っていうのを覚えておく必要はある。
次の２文字がさっき言ったFontLabの内部コード、で次の4文字が軸タグ、そのまた次が軸の表示or非表示で、ここを非表示、つまりアイコンをポチってして眼を瞑らせるとフォントのファイル…… VariationAxisRecord の flag のところに HIDDEN_AXIS〈0x0001〉が書き込まれる。 flagというのは特定の軸にその定義に関わらず特別なトグルを割り当てる場合につかわれるといった感じのもので HIDDEN_AXIS は軸をユーザーインターフェイスに直接公開したくない場合に使用される。
つまり、こうしておけば軸はプログラムからの直接操作以外を受け付けなくなるので、例えば、イラレのバリアブルフォントのメニューに必要無いアレとかコレとかの軸が、だぁ〜〜〜って並ぶ心配をする必要がない。え？ どういうこと？ どうやったらそんなことに？ ん〜っと、そうだなぁ……たとえば、機械的作業で山盛り軸を作っちゃたりする場合なんだけど……いや、まぁ、このあたりのBadな話は後回しにしておくか……。普通の場合はここは気にする必要はないが、フォントを出力したときにメニューに軸が並ばない……みたいなことになったときは、間違ってここを設定してしまっていないかを確認したほうがいい。
さてさて、それで、その隣が、軸の最小値、デフォルト値、そして最大値で、ここもチャンとしておかないと後々面倒に……って……そうだなぁ、ここ少し解説しておこうか……。
さて、どうわかりやすく説明するか……百聞不如一見。フォントが内部的になにをやっているかということなのだが、あ、そうだ！ 実はそれを可視化しようとして制作したフォントがあった。下のフォントだ。このカラーバリアブルフォントその名をThe Variations Sample Color Variable No.7といって、それだと長いので適当に縮めてSacova-sevenという名前をつけた鋭意絶讃制作頓挫中の書体だ。バリアブルフォントのノードやハンドルの動きがリアルタイムに見られるという、まぁいつものごとくの思いつき、ワンアイデア。もっともこのフォント、自分自身で自分を定義づけているように見えなくもなくもないので、その辺考えると……妙に哲学的。まぁ教育目的には実にピッタリだと思ったりもしたりもしないわけでもないわけでもないのだけれど、いつもの如く、役には立たないうえに、厳密に言えば間違ってもいる。まぁ、どういう事かと言うと、令和元年皐月現在、カラーのバリアブルフォントがまだイラレで扱えないうえに、出力ではCFFが駄目でttfになるから……っていう話も本来なら先にすべきなんだろうけど……まぁ、この話も長くなるので、いずれまた。
■□がそれぞれノード、●がハンドル。■はコーナのノードを表している。こうしてみると案外仕組みが直感的に理解出来るんじゃないかな。これだけ、スタイルが変化しても個々のポイント、まぁつまり座標はそれほど非常識にくるくる動きまわっているわけではない。ということも解る。あたりまえだけど。なので、たいしたことはしていない……いや、勘違いする人もいるかもしれないから追記しておくけど、フォントのようなデータ量が限られるプログラム要素で軽便な処理で複雑な表現が可能ならそっちのほうがより望ましいというのは言うまでも無いよね？ たいしたことはしていないっていうのはそういう意味で……まぁ、実に素晴らしいテクノロジー。
で、そういうわけなので、なんというか、一番派手に動きそうだったSですらこれだから、後は推して知るべし……AとかIとかHとか、もうハンドルすら出ないから。地味だし、ハンドルがあってもモサモサ動くだけなので、テクノロジーの素晴らしさは別として、作っていているほうはあまり楽しくない。しかもなんか、この、トゲトゲの出てる微妙な動き……って、いうのは小さく出力すると書体によっては毛虫か粘菌がのたうち回っている様にしか見えない。この書体で長文打つと、本当に……気持ち悪いです。
基本的なところでいえば、色の選び方に一番問題があるのだが……他にもいろいろ問題はある。そんなことやあんなこと……まぁ、ともかく、これと比べたら前々回散々disった……件の、SansForgeticaが、天使の微笑みにみえるほど……フォントスタイルはヒューマニスティックということにしてはいるんだけど、かなりAvenir寄り……というか、このSとかちょっと似すぎていて訴えられても文句言えないレベルだ。ただ、ノードの数や位置、ハンドルの長さ、メトリックスやカーニング含め、もう本物とは似ても似つかないけど……ということだけは本物の名誉のために付け加えさせて頂くけど、それはともかく、そんな感じのヒューマニスティックなサンセリフを指向しているにもかかわらず、もうヒューマニズムとは程遠い殺伐とした気分になっていくばかりなので……そういうわけでアプローチ法を現在再検討中。まぁ、No.7と名乗っていることでお察しの通り、ノードとハンドルをイキにした、このワンアイデアで作っては投げ、組立ては壊し、という……それ以前の死屍累々については……ちょっと……語りたくない。
それで、まぁ、見続けていると段々気持ち悪くなっていくかもしれないので、気をつけて欲しいのだけれど、それはともかくこういうふうにそれぞれの動きが有機的に組み合わさることによっていろいろな変化が生まれるようになるのだと言うことが……もう、直感的にでも理解出来れば、それでいいよ。ホントに。
え〜っと、それで、軸だ。Sacova-sevenの詳細はどうでもいい。まぁ、その、基本的には軸は、１つ１つが滑らかに変動する一つのデザイン特性という感じで定義されるので、さらにコレを複数組み合わせることでさまざまな種類の変動を表現できるような仕組みになっていますよ……みたいな感じだ。まぁ、とはいっても各軸Fixed……16.16の固定小数点値を使用した数値範囲という制限はある。32か……まぁ、大きすぎず小さすぎずで計算には常識的な範囲じゃない？ それで、そうやって計算した結果の中間……真ん中って意味じゃ無いよ……その中間形状はそれぞれの極値からのデルタで定義される形になる……え〜っと、デルタっていうのも、高校以来なのでもう忘れちゃってる人もいるかもしれないけど数学的に言えばちょっとづつ増える量って感じで……Δの形からもわかるように基本的に増え……あ〜、どう定義するのがいいのかなぁ……特定の軸によってつくられた変動空間内の特定の小範囲についてのデータ項目のデフォルト値に対する調整を指定するための変動データ内の増分の……いや自分で言ってて意味わかんなくなってきた。もうデルタでわかるから……Aからの移動の量と向きがデルタで、つまりAにデルった結果がBとか、まぁ、そんな適当な感じでいいです。いや、俺が適当すぎるよね、これは。
それで、そんな感じなので、軸は変化量さえ抽出できればもうそれは軸に沿ってノードや輪郭線の相対移動に置き換えられるので、この数字の増減はまっすぐな線になって……いや、この言い方もひどく正確じゃ無いなぁ……まぁ言いたいことは伝わるよね？ そういえば、この連載も、用語の正確性が駄洒落優先で駄目なことになっていて、こういう場合。誤解無く正確につたえようとすると説明がダラダラするし、かえって誤解される。ある程度専門用語って整理しておいた方がいいのかなぁ？ どう思う？ まぁ、余談はともかく、そういうわけなので、実は２枚のマスターレイヤーはそれぞれが極値である必要も無い。理論的には極値を超えてプラスマイナス可能な限り伸ばしていくことはできる。まぁ、それをすると、あとあと碌なコトにならないのは目に見えるけど「出来ることと、やって良いことは違います」って、いいんだよそんなことは承知でやってるんだから。
で、まぁ、ともかく、そういうおかしなことにならないようにするために、最初のところで解説したように、軸には最小と最大の座標値を指定する。そうすることによって、これが仮想の座標極値ということになって箍が嵌められる。どこまでも、あさってな方向へすっとんでいきがちな悪ガキにリードをつけて行動半径を縛る……いや、わかりにくいか……まぁ、図にするとこんな感じ。
minValue は軸の最小座標極値。逆に最大が maxValue。軸はマスターレイヤーや極値を超えてどこまでも伸びていけるけど、意味が無いのでフォントの変化は Value で決めた枠の中に固定する。つまり出力結果のデルタの下がmin、上がmaxに一致する。だから、そのときマスターレイヤーが必ずしも極値である必要はない。極値でもいいけど、変化量さえ抽出できて、それでデザインの破綻がおきないのであればマスター同士が限りなく接近していても、 Value で決めた枠の外にあっても構わない……みたいなこともこれで、なんとなくイメージ出来るんじゃないかな？ もちろん一つの軸上にマスターを複数設置することも出来る。
例えば下の例は、前に真ん中の棒をジェイムズ・ティプトリー・ジュニアするためにrvrnで置換してGSUBでワチャワチャする方法を紹介したけど、それをやらずにマスターのみで件のブランケットトリックを実現させるやりかた。見づらいかもしれないけど点の数を数えてみれば解るように、もちろんグリフデータ内ではノードと輪郭の関係に矛盾はない。まぁ、真ん中の２枚を比べてみればすぐわかる程度のちょろっとした手品で、要は縦のバーを最初から２つのパーツに割っていただけ。これは、あまり冴えたやりかたではない。
というのは、真ん中の部分がデザイン的に破綻する……つまり青矢印の部分でも遷移が発生するからだ。ただ、この間を限りなく狭くすれば気が付かれることはないので態勢に影響はない。問題はみつからず問題にされなければ問題にならないという大人な解決方法……いや、まぁ、確かにコーティーにはかなわないのだけれど、そういう話はおいておいて、微妙なデザインの差異を細かく修正していくということに対してもそういう感じでレイヤーを追加していくというのは手法の一つだ、そのような細かい修正のためだけの目的で、そのグリフ１文字にだけ単独で、どんどんレイヤーを追加できる。だから、チマチマした直しの度にフォント全体でマスターを増やしていく必要があるんじゃないか……という心配は不要だ。まぁこんな感じ。というわけで今回の場合 :wt=576 :wt=577という２つのレイヤーはここ＄のグリフにしか存在しない……あ、あと¢にもか……。
ということで、脱線しかけたけど、なんとか戻ってきたぞ。FontInfo！
さてそれで、極値の値の設定をする。OpenTypeのVariationAxisRecord 的にはminValue が軸の最小座標極値。逆に最大は maxValue。フォントを開いたときの初期値。債務不履行じゃないほうのデフォルト。その座標の値は内部的には defaultValue に設定される。ここの数値がマスターフレームのものと一致する必要は全く無いけれど、普通は揃えたくなるよね？ まぁ、気にならなければ別にかまわないけど。
で、続き。それから、その下の Thin=100, "Extra Light"=200, Light=300, (Regular)=400, Medium=500, "Semi Bold"=600, Bold=700, "Extra Bold"=800, Black=900 ってグチャグチャっとなっているところは……って、この説明するまえに Instances やっておいたほうがいいな。ちょっと待ってね。いや。その前にまずMastersのところから。
左のAxesってなっているところの下、Masters をポチってすると出現する。一番右側のAAAってなっているのが、マスターが補完に使用できるようになってるよっていう意味なので、ここをポッチってするとそのマスターが補完プロセスから除外される。現在このフォントだと、２つしか見えないが、これは現在レイヤーが２枚しか存在していないからだ。左下の＋ボタンを押してマスターを追加すると、それが反映される。当然マスターレイヤーを増やしていけば下の図のようなカオスな状況に近づいていく。つまり、リストにはこのフォントの全てのフォントマスターが表示されますよ……ということだ。ここで、それぞれのマスターのプロパティを変更する。勿論下のような状態になってくると、もうレイヤーの名前ちゃんとしておかないと訳がわからなくなるからね。
Location:ってなっているところでそれぞれのレイヤーの軸のプロパティがどういう値になるかを編集する。
Weightの場合、Attributes: ってなっているところにも同様の意味の数値がはいっているけど、ここの数値とLocation:の値とは連動しないので必ず下の数値で合わせること。図のフォントのLocation:の値Thin wt=100とBlack wt=900は、Axesのところで決めたwt……つまりwghtの値のどの位置にそのレイヤーが来るのかということを決定する。
さて、それでは、最後のInstances。ここはフォントのsnapshotが収められる。バリアブルフォントを選択したとき、下の図のようにメニューにやたらと長いスタイルを並べようと企んだりする場合もここで設定する。ちなみにこの場合は90を超えている。ここまでされると細かいの通り越して迷惑にも程がある。どうせスライダで微調整できるんだからここまで細かく分類する必要も無いだろう……って、思う。あんまりメニューが豊富過ぎても選択に困るし、逆にセットをちゃんと用意しておかないと選んでくれない……スタバで注文するみたいに面倒くさい呪文おぼえるほうが……まぁ、今はそんな話はどうでもいい。
え〜っと、何だっけ。あ、まぁそんな感じで。フォントに新しいインスタンスを追加生成する場合はやはり下の＋を、デザインスペース全体を作り直す場合はリセットすればここは空になる。まぁ、インスタンスなのでオブジェクトからいくらでも、すきなように生成することができる。インスタンスの編集は選択してプロパティを弄る。ここでは、Extra BoldをWeight=800ってしてるけど、当然、ここを変更すれば、Extra Boldを選んだときにその値でvariablefontが出力される。一番右のResetを押せばリストが空になる。インスタンスあくまでフォントからの出力結果……つまりオブジェクトからのインスタンスな訳なのでここをどんなに弄くり回してもフォント自体のデザインが変わるわけではない。
さて、で、まぁフォントの出力を見ながらここを微調整しても、不親切にしてもは、どうでも良いんだけど、上のメニューのように90超えるようなセットを作っては、リセットし、作っては、リセットし、の繰り返しになると非常に非効率だ。え〜、また、1個、1個インスタンスを編集し直すの……ってなる。そのために一度に複数のインスタンスを定義する便利な方法がある。
それが、さっきのAxes のところでの Thin=100, "Extra Light"=200, Light=300, (Regular)=400, Medium=500, "Semi Bold"=600, Bold=700, "Extra Bold"=800, Black=900 ってなっていたところの種明かしで、ここをチャンと設定しておけば、InstancesのメニューでFrom Axesをポチってするだけで、そのスタイルのインスタンスをあっというまに出力してくれる。というわけで、ここを細かくすればいくらでもリストが追加できるし、雑にしておけば雑になる。また、軸が増えれば増えるほど、当然ここは順列組み合わせが加わって爆発的に拡大する。下はさっきのフォントにレイヤー2枚と軸1つを追加したんだけど、まぁ、図のようにレイヤー4枚があっというまにこのとおり。作ったフォントがいとも簡単に新橋の居酒屋の壁のように……いや、これだともうよくわからないな。今回はオチがわかりづらい。季節の変わり目で調子崩したかも……。
