ことわざイントロクイズ。急がば…… 急がば新幹線じゃない？ 上野〜金沢で2時間半だって。
どうも、デザイナー兼イラストレーターのもりたです。
前回の「【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識」で次回予告したものがうまくまとめられなかったので、今回は第3回で予定していた、Photoshopのフォントと文字ウィンドウについて書きます！
普段仕事でPhotoshopを使ってる人でも、文字ウィンドウはその数値が何を指しているのかよくわからないまま使っていることが多いんじゃないでしょうか。
特に文字詰めに使用する「カーニング」「トラッキング」「ツメオプションの設定」の違いがいまいちよくわからない。
例えば「ツメオプションの設定」の「100％」という数値は、文字のどこを基準に何が100％詰まるの？とか。「トラッキング」の数値って何を基準に100なの？ピクセルじゃないしな？とか。
正直に言っちゃえばWebでは文字詰めをそんなに細かく設定することがないので、なんとなくでもデザインできちゃっていると思いますが、せっかく調べたので文字詰めするときにぜひ参考にしてください。
もくじ
フォントのボディと字面枠の話
今回の本題の前に、フォントのボディと字面枠についておさらいしたいと思います。
というのも、これが文字詰めの話をする際に欠かせない知識だからです。
仮想ボディと字面
和文書体は、文字の全角にあたる正方形の枠内にデザインされています。
この枠は、活字でいうと活字そのものの大きさである「ボディ」のサイズにあたりますが、写植では実体がないため「仮想ボディ」と呼んでいます。
書体は、ベタ組のときにも文字と文字が接しないように「仮想ボディ」に対して、少し小さめの枠内にデザインします。文字の形をした部分＝「字面」が収まるこの基本枠を「字面枠」（レターフェイス）と呼びます。その大きさは、書体によって異なっています。また、かなは漢字よりもやや小さめです。
引用元：仮想ボディと字面 | フォント製品 | 株式会社モリサワ
https://www.morisawa.co.jp/font/about/knowledge/face.html
「ボディ」は慣習的にデジタルフォントにおいても「仮想ボディ」と呼ばれているんですが、先日下記の記事を読んでから“仮想”ってつける必要ないんだなと思ったのでこの記事内では「ボディ」と呼ぶことにしています。
参考：「仮想ボディ」というデジタルフォントの風説 | ものかの
http://tama-san.com/body-of-digital-fonts
ボディと字面枠の間には余白がある
なぜボディと字面枠の間には余白があるのか。
上記に引用した丸山邦朋さんの記事に以下のように書かれています。
金属活字は、ひとつひとつの文字に幅の属性があるといえます。この幅は「次の活字が置かれる開始位置」として機能します。幅があるから次の活字の位置が決まる。そして次から次へと活字を並べていくことができる。活字の発明というのは、このように「並べるしくみ」も含めた発明なんですね。
引用元：「仮想ボディ」というデジタルフォントの風説 | ものかの
http://tama-san.com/body-of-digital-fonts
さらに同記事内で、この金属活字をデジタル化したのがデジタルフォントであると説明されています。
じゃあなぜボディと字面枠の間に余白があるのか。
もしこの余白がない状態で文字を「並べ」たらどうなるのか。
こうなりますね！ 読みづらい！
読みづらくならないために、フォントの機能としてのクオリティを保つためにここの余白は存在しています。
ひらがな同士がピッタリくっついていないのは、使用したフォント（筑紫Aオールド明朝）が、ひらがなの大きさが一定ではない設計のため、字面枠と字面の間にも余白が生じているからです。
また、文字の形やフォントのコンセプトによって次の文字への距離が変わるため、ボディと字面枠の間にある余白の大きさはフォントによって異なります。
Photoshopの文字ウィンドウ
次に、Photoshopの文字ウインドウの各項目を改めて確認してみましょう。
本題的には「カーニング」「トラッキング」「ツメオプションの設定」の3つがわかればいいんですが、せっかくなので全部おさらいしてみます。
フォントファミリ
フォントを選ぶときにいつも使ってるアレ。特に書くことがない。
フォントサイズ
単位は「環境設定」で、px/pt/mmのいずれかを設定できます。
ptは1/72インチのことを指すので、画像解像度が72dpiのときは1px=1ptで表示されます。ちなみに、1インチが25.4mmなので、1pt=約0.35mmです。
単位がpxでも小数点第2位まで指定できます。
ビットマップで表示されているので、よほど大きいサイズでない限り小数点第2位まで指定しても見た目的にはほぼ変わりませんが、値によってはアンチエイリアスのかかり方や文字間隔が変わったりします。
Webのデザインをする際には単位をpxに設定し、画像文字でない限り整数を設定したほうが良いでしょう。
行送り
行頭から次の行頭までの高さを指定します。そのため余白は文字の下にできます。
ちなみにCSSでline-heightを設定した場合は文字の上下に均等な余白ができます。
「自動」を選択すると フォントサイズ×1.75 の数値が設定されます。
垂直比率
文字の縦の比率を変えられます。通常は100%で、80%くらいにすると新聞用のフォントっぽくなります。
でも素直に新聞書体を買って使ったほうがいいですね。
水平比率
文字の横の比率を変えられます。通常は100%。
数値を小さくするとコンデンス体っぽくなるけど、素直にコンデンス体を使ったほうがいいですね。
ツメオプションの設定
通常は0%。文字の“ボディと字面の間に生じる余白をどれだけ削るか”を調整できるところ。詳しくは後述します。
トラッキング
通常は0。選択したテキストブロック全体の“文字のボディとボディの間隔”を調整できるところ。詳しくは後述します。
カーニング
通常は0。特定の文字の組み合わせの“文字のボディとボディの間隔”を調整できるところ。詳しくは後述します。
ベースラインシフト
横書きテキストの下部（縦書だったら左側）のラインを上下（左右）に調節するところ。
中学生の頃使っていた英語のノートを思い出してください。qypjといった下にはみ出る文字が“引っかかってる”あれ、あの赤い線がベースラインです。
言語
段落ウインドウの「ハイフネーション」にチェックが入っている場合に、言語辞書を参照、テキストのハイフン設定をチェックしてくれるらしいです。（使ったことがない）
ちなみに現状の主要なブラウザの最新バージョンで、ハイフネーションが自動に入るのはIEのみです。
CSS3でhyphensプロパティが検討されていますが、2015年4月時点では草案の状態であること、Google Chromeでは実装されていないことなどを考えると、まだこの設定は使う機会が少なそうです。
アンチエイリアス
文字にアンチエイリアスをかける方法を変える場所。こちらの記事が一番詳しいですね。
参考：細かすぎて伝わらないアンチエイリアスの話 | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
http://design.kayac.com/topics/2014/02/ps-anti-aliasing.php
ちなみにCC以降では「Mac LCD」もしくは「Windows LCD」と、「Mac」もしくは「Windows」という項目が追加されました。
いままでどのアンチエイリアス設定を使っても微妙にブラウザでの表示と異なっていたのですが、Mac/WindowsそれぞれのOSでのデバイステキスト表示を再現できるようになりました。
LCDとは液晶ディスプレイのことを指します。
余談ですが、Macだとアンチエイリアスのかかり方はMac LCDが一番太いです。
Photoshopで文字詰めをする
本題は文字ツメ（ツメオプションの設定）、トラッキング、カーニングの設定です。
この3つ、どれも文字と文字のアキを調整することを指していますが、もちろんそれぞれ役割が異なります。
あとうまく区別する言葉を思いつけなかったので、「文字と文字のアキを調整する」行為そのものを【文字詰め】、「Adobeのアプリケーションにおける特定機能の呼称」を【文字ツメ】と表記しています。よろしくお願いします。
カーニングとトラッキングと文字ツメの違い
とりあえず3つ並べて書きましたが、頭の中では
- カーニングとトラッキング
- 文字ツメ
と2つに分けて考えてください。
特にカーニングと文字ツメは、口語的には同じ行為を指す言葉として使われることが多いのですが、Adobeはそれぞれに異なる定義付けをしているため「Adobeソフト上ではカーニングと文字ツメは違う動きをするよ」というポイントを抑えておかないと混乱してしまいます。
Adobeの定義
- カーニング&トラッキングと文字ツメの違い
-
- カーニング&トラッキングは選択した文字の右側のアキを調整するもの
- 文字ツメは選択した文字の両側のアキを調整するもの
- カーニングとトラッキング（字送り）の違い
-
- カーニングは特定の文字の組み合わせに対して文字のアキを調整するもの
- トラッキングは選択した一連のテキスト全体に対して等間隔のアキを設定するもの
参考：文字組関連編 カーニング、字送り、文字ツメの違い
http://www.adobe.com/jp/print/tips/indesign/category9/page3_1.html
なぜ文字ツメで文字の両脇が詰まるのか
実は前述してるんですが、結論から言うと、Photoshopの文字ツメで削られる余白は、ボディと字面の間の余白全体だからです。
簡単に言うと「ツメオプションの設定」の数値を大きくするごとに、フォントのボディがひと回り小さくなっていくってこと。
図にしてみましょう。
活版印刷の頃、活字の外側を削って文字を詰めた人がいたという話を聞いたことがありますが、イメージとしてはそれに近いですね。
だから「ツメオプションの設定」において設定できる数字は0％〜100％で、100以上の数字は設定できません。
活字の周りにある余白を100％以上削ったら字面まで削れちゃいますからね。
文字ツメとカーニング／トラッキングのもうひとつの大きな違い
上記で説明したとおり、文字ツメでは100%以上の数字を設定することができず、文字と文字が重なることはありませんが、カーニング／トラッキングにおいては設定できる数値に上限・下限はなく、文字と文字を重ねることも可能です。
こういうとこ、写植っぽいですね。
文字ツメでは両脇が詰まるという特徴に次いで、この点がAdobeソフトにおける文字ツメとカーニング／トラッキングの大きな違いだと思います。
カーニングとトラッキング
Adobeアプリケーション上でのカーニングとトラッキングの違いは、前述したとおりですが、もう一度おさらいしましょう。
- カーニングは個々の文字の右側のアキを調整する
- トラッキングは選択した文字列全体に等しくアキを与える
うんうん、つまりデザイン作業的にはトラッキングしてからカーニングという手順が良さそうです。
全体的な文字のアキはデザインのニュアンスを左右しますし、大枠を決めてから細かい調整を詰めていくのが定石です。
ただアプリの処理上では、カーニングとトラッキングの数値は同じ単位を使用していても影響しあわないので順番を前後させても、数値上の結果は同じです。あくまで数値上は。
それでは順番に、カーニングとトラッキングの数値の話からしていきましょう。
カーニングとトラッキングの数値
上記で引用したAdobeのページには以下のように書かれています。
カーニングと字送りの値は、いずれも1/1000em単位で指定します。emは、その文字に設定されているフォントサイズと正確に比例する相対的な単位です。
引用元：文字組関連編 カーニング、字送り、文字ツメの違い
http://www.adobe.com/jp/print/tips/indesign/category9/page3_1.html
ウェブデザイナーならお馴染みemですね。
つまりフォントサイズに10pxと設定していた場合、カーニング／トラッキングの単位は以下の計算で割り出すことができます。
よく分かんない？ それじゃあ図にしますか。
今まで漠然と数値を設定していましたが、これで思い通りの余白を設定することができますね！
余白は文字の右に出る
ところで上記の図、「王」の右側にも黄色い余白を付けました。
この記事で何度も触れている通り、カーニング／トラッキングは文字の右側に余白を設ける設定になっています。
どういうことかと言うと、この後に文字を続けても余白は維持されるということです。
逆に言うと、左側の文字がなくなると余白の設定がなくなるわけですね。
これは個別にアキを設定するカーニングを行ったあとで文字の差し替えをしようとした時に気をつけたいポイントです。
またカーニングの設定を使って文頭を前に詰めることも可能だったりします。
文頭なんだから前に文字がないのになぜ？ と思ってしまいますが、概念としては文頭の文字の前にゴースト文字があるという感覚でしょうか。
ゴーストなので消すことはできません。
また常に文頭の前に存在するので、文頭の文字を消してもゴースト文字の右側に設定されたカーニングの数値は保持されます。
なんだか不思議ですね。
トラッキングはCSSで設定できる
ちなみにCSSのletter-spacingというプロパティを設定した場合も文字の右側に余白が発生します。
トラッキングの設定値からCSSに設定する数値を出すのは思ったよりも簡単です。
だってそもそもトラッキングの単位がemをベースにしているので、letter-spacingの設定単位をemにすればいいわけです。
その場合の計算式は以下のようになります。
これでオッケー！ 簡単！！
カーニングの設定が存在する関係か、Photoshopで取得できるCSSには含まれないんですが、こんな簡単に割り出すことができるんですね。
そもそもそのプロパティそんなに頻繁に使わないよっていうツッコミは間に合ってます！ 大丈夫、黙ってて！
カーニングもCSSで設定できる？
うん、まぁ一応。
古い記事ですしお読みになった方もいるかもしれませんが、「HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」」では個々の文字をカーニングするためのJSをご紹介しました。
理屈としては文字をspanで囲んで、それぞれにletter-spacingを設定するというものです。
余白の空きやすい文字というのは決まっていますから、それぞれに対してあらかじめツメ幅をJSで設定しておくことで、動的に制御することができるんですね。
ツメ幅の設定は個々の文字だけでなく、特定の文字の組み合わせに対しても行うことができます。
例えばアルファベットの「WA」とか「To」とか、この2つが隣り合ったときは食い気味に並んでくれないとすごく余白が空く組み合わせってありますよね。
そういう特定の組み合わせが来たときは必ずこのツメ幅で並べてね、と設定することをペアカーニングと呼びます。
- ペアカーニングを設定されるペアの例
-
- LA
- P.（ドット）
- To
- Tr
- Ta
- Tu
- Te
- Ty
- Wa
- WA
- We
- Wo
- Ya
- Yo
トップページのフォント使いが特徴的な「電通報」では、前述した記事で紹介したJSと同様のやり方ですが、独自に組んだDLTRKerning.jsを使用してカーニングを制御しているようです。
DLTRKerning.jsの中身を見るとカーニングの設定情報を見ることができて面白いです。ただ、和文に対してペアカーニングを持たせていないのは少し意外でした。
カーニングのメトリクスとオプティカルって何
ざっくり説明しますと、フォントに内包された情報を元に詰めてくれるかアプリケーションが自動で詰めてくれるかの違いです。
メトリクスがフォントの情報を元に、オプティカルがアプリが自動で詰めてくれる方です。頑張って覚えて！
- メトリクス
-
フォントに内包された情報を元に詰めてくれる。Illustratorでは「自動」と表示されている。フォントに内包される情報はペアカーニング情報のほか、フォント独自の詰め情報が含まれる。（ただし詰め情報を持ってるのはOpenTypeのフォントに限る）
詰め情報やペアカーニング情報を持ってないフォントにメトリクスをかけても特に変化はありません。
和文のフォントは詰め情報を持ってない方が多いらしいので、変化がないケースがやっぱり多い。でも従属欧文（日本語のフォントの中に入ってる半角英数字・記号）にだけ詰め情報があるフォントもあって、その場合は欧文のところだけ詰まる。
- プロポーショナルメトリクス
- メトリクスを使うと「フォント内のペアカーニング情報」＋「フォント独自の詰め情報」の合わせ技で詰まるけど、これにチェックを入れるとフォント内のペアカーニング情報を反映させず、フォント独自の詰め情報だけで詰めることが可能。
Photoshopでも使えます。
使うときは[文字]パネルメニュー > [OpenTtype] > [プロポーショナルメトリクス]を選択。
- オプティカル
-
アプリケーション（今回の場合はPhotoshop）が自動で詰めてくれる。ですから、アプリケーションによる設定に詰め幅が依存する。
和文フォントが詰め情報を持っていないものが多いので、「日本語を詰めるときはオプティカル」と言われたりするのはそのため。
参考：カーニング各種のおさらい – なんでやねんDTP
http://d.hatena.ne.jp/works014/20121117
カーニングの最小値
最後にカーニングのショートカットキーの話をしましょう。
カーニングのショートカットキー、有名ですよね。
←＋cmdorctrl カーニングの数値が減る
→＋cmdorctrl カーニングの数値が増える
今まで何気なくこいつを使ってたわけですが、1回ごとにどれくらいアキが変化しているか気づいていましたか？
Photoshopでは上記のショートカットキーを1回使用するごとに、カーニングの設定値が20ずつ変化するようになっています。
emに直すと0.02emですね。1回ショートカットキーを使用すると、フォントサイズの2％分文字が移動していることになります。
これより小さい数値で調整したい場合は、文字ウインドウで直接カーニングの数値を打ち込む必要があります。
ただ、カーニングの設定値を1変更しても0.001emなので、ビットマップで表示されているPhotoshop上ではほぼ動いていないも同義のため、その辺は利便性とこだわりのちょうどいいところを各々見つけるのがいいんじゃないでしょうか。
次回予告
説明したいことをまとめて書いたら、なかなかのボリュームになりました。
いままでフォント選んでサイズ変えるくらいにしか使ってなかったわーという人でも、ごちゃごちゃしたPhotoshopの文字ウインドウに親しみを持ってもらいたいと思って書きましたが、いかがだったでしょう？
さてそれでは予定はあくまで予定、次回予告です。
- 今回書けなかった「フォントの名前についてる○○ってどういう意味なの？」
- フォント好きがチェックしておきたいアレコレ
このどちらかをお送りする予定です。次回もよろしくお願いします。
もりたでした。
【まだまだ“フォント”について知りたい方に】
※ 【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識
※ デザイナーのためのテスト・クイズまとめ「フォント当て」「カーニング」など
※ Webフォント（日本語／欧文）サイトまとめ9選！変更方法もご紹介します