印刷物や紙媒体のデザインだけでなく、ウェブ制作でのデザインにおいてもタイポグラフィの知識はとても重要になります。中でも文字詰については細かく調整することで、見た目の印象も大きく変わってきます。今回はデザイン制作で扱う文字詰めの種類や使い分けについてみていきたいと思います。
ウェブデザインでは、ポスターや冊子のデザインと比較して、そこまでシビアに調整することも少ないかもしれませんし、UIデザイン系のアプリケーションでは、その辺りの設定も細かく調整できないものもあったりします。そこで今回はIllustratorを使っていろんな文字詰めの設定を比較していきます。
手動調整と自動調整
文字詰めを設定する際に、自動で一括して設定する場合と、個別に手動で調整するケースがあります。シビアに設定するのであれば、手動で文字単位の文字詰めを行うことになるのですが、現実問題として難しいこともあります。そんなときには文字情報として用意された字詰を活かしながら、細かい部分は手動で微調整を重ねていくという方法が一般的のようですね。
文字詰を手動で指定するカーニングとトラッキング
文字詰についてはまず大きく2つに分かれることを押さえておきたいですね、それは「カーニング」と「トラッキング」です。どちらも文字間の間隔を広げたり狭めたりするときに使われます。Illustratorでは「文字パネル」の部分でこのようにカーニングとトラッキングが設定できるようになっています。どちらも基本的には数値で設定する形になるのですが、カーニングでは自動で設定できるオプションが用意されている点が異なります。数値を大きくすると広がり、小さくすることで狭くなります。
カーニングとトラッキングの大きな違いですが、文字単位での字詰であるか、全体を一括で均等に字詰するかの違いがあります。
| カーニング |
文字単位での字詰めの調整 |
| トラッキング |
指定範囲全体で均等に字詰めを行う |
ですので、全体の見た目としてざっくり字詰を調整したい場合にはトラッキングを、文字によって字間を微調整したい場合にはカーニングでの設定ということになります。手動で数値を入れることでイメージに合わせた字間調整を行います。
字詰を自動調整する時のオプション
先ほどのものは数値を入れることによって手動で字詰を調整していきましたが、カーニングにおいては、アプリケーション側で文字に合わせて自動調整されたり、フォントデータに含まれる文字単位での字詰情報を使った自動調整もできます。イラストレータでは自動調整する際のオプションとして「オプティカル」「メトリクス」「和文等幅」の3つが用意されています。文字数が多い場合など、全体をざっくりと調整する際には使えるオプションですね。
| オプティカル |
アプリケーション側で文字に合わせて自動調整される、フォントデータに字詰情報がなくても設定できるがやや詰まりがちに見えてしまう |
| メトリクス |
文字ごとの形に合わせて最適化された字詰情報を元に自動調整される、そのフォントが最もバランスよく美しく見せることができるが、TrueTypeフォントなどフォントデータはその情報がない場合があるので使えない |
| 和文等幅 |
和文書体において使えるオプションで、文字の仮想ボディ（正方形のスペース）に合わせて均等に配置され、文字詰を行わない形になり、本文などベタ組で読ませたいテキスト部分に有効 |
用途によって使い分けるのが重要ですが、上記から書体が最もバランスよく美しく見せることができるのはメトリクスであると言えますね。使えるフォントデータにもよりますが、使えるのであればメトリクスで設定しておきたいですね。
ペアカーニングとプロポーショナルメトリクス
先述のメトリクスでの字詰では、文字が持つ字詰情報に合わせて自動調整されるわけですが、その文字ごとの字詰情報は文字の形によって最適化されているため、文字によって異なるものもあります。また、組み合わせる文字の形によって、同じ字詰でも離れて見えたり、詰まって見えることもあります。例えば、AとWにおいては他の文字と同じ字詰で組み合わせた場合、その形の影響により離れて見えるため、AとWが続く場合にはより詰めて見せる必要があります。このように
文字の組み合わせによって調整される字詰を「ペアカーニング」と呼びます。
メトリクスではこのペアカーニングが適用されるのですが、その影響で別の箇所で字詰した場合に見た目のバランスが崩れることもあります。そのため
メトリクスで字詰をする場合には「プロポーショナルメトリクス」という設定を有効化しておくことが大事です。特に和文と欧文が混ざる場合でも文字詰調整においてはペアカーニングの影響を受けやすいようです。
プロポーショナルメトリクスでは、字幅も考慮した字詰がされるため、ペアカーニングで字詰されたバランスを調整してくれる役割を持ちます。
このプロポーショナルメトリクスの設定方法ですが、イラストレータでは「OpenType」のパネルから「プロポーショナルメトリクス」のチェックをONにするだけですので、忘れずチェックしておきたいですね。メトリクスでの設定時には併用するように覚えておきましょう。
今回は文字詰の種類と使い分けについてIllustratorを使った設定方法を例としてまとめてみました。ウェブデザインにおいては印刷物などのデザインと比較するとそこまでシビアに文字詰めを調整する場面は少ないかもしれませんが、バナーやサイト内のビジュアルイメージを作る際にはぜひ意識しておきたいところですね。
