「何となく」やっているWEBまわりのカーニングに関する機能について調べ直してみました

文字の見やすさや美しさのためにカーニング（文字間隔）はTypographyにおいてとても重要です。
かつてWEB上では文字間隔で制御できるのはletter-spacing（等間隔で文字間隔を指定する）に限られ、半ば諦められていた項目でしたが、
フラットデザインが浸透し、Typographyの重要性が強くなったことや、text-align: justify;、font-feature-settings: “palt”; など文字間隔に関わるCSSの機能が充実してきたことなどで、WEBにおいてもカーニングが重要度を増してきているように感じます。
WEBのUIデザインツールとして人気を増しているFigmaでも１文字ごとのカーニングができるようになるなど、ツールの進化にもその重要性が見えてきます。

グラフィックデザインツールの大御所であるPhotoshopやIllustratorでは、カーニングに関する機能が充実しており、自動のオプションでかなり制度の高いカーニングが可能です。
ただ、自動オプションであるオプティカルやメトリクスって何だろうと思いながらも何となく使っていたのが正直なところです。

また、CSSで最近使われることの多くなってきた font-feature-settings: “palt”; というのも、何となく文字間隔がいい感じになるおまじないのような感覚で使ってきました。

ただ、何となく利用していると、使い方にむらが出たり、間違った使い方をしてしまう恐れもあります。
そこで今回、このあたりの機能について調べてみることにしました。

PhotoshopやIllustratorのカーニングオプションについて

メトリクスカーニング

Adobeの公式マニュアルを参照すると、

メトリクスカーニングまたはオプティカルカーニングを使用すると、自動的に文字をカーニングすることができます。メトリクスカーニング（自動カーニングとも呼ばれます）では、ほとんどのフォントに含まれるペアカーニング情報が使用されます。ペアカーニングには、特定の文字の組み合わせに対する間隔情報が定義されています。この文字の組み合わせには、LA、P、To、Tr、Ta、Tu、Te、Ty、Wa、WA、We、Wo、Ya、Yo などがあります。メトリクスカーニングを使用するように初期設定されているので、テキストの入力または読み込み時に、特定の文字の組み合わせに対して自動的にカーニングが行われます。
Adobe Photoshop での行と文字の間隔: https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html

とのこと。
欧文フォント自体に設定されているカーニングの情報を使ってカーニングを調整する方法のようですね。フォントを作った方が設定した情報をもとにカーニングを行うので、利用可能であれば、高い精度のカーニングができそうです。
欧文フォントとありますが、OpenTypeのフォントでは和文フォントでもペアカーニングが設定できるようなので、和文フォントでもフォントによっては利用できそうです。

オプティカルカーニング

欧文フォントの中には、固有のペアカーニング情報を持っているフォントもありますが、最小限のカーニングしか定義されていないか、まったくカーニングが定義されていないフォントを使用する場合や、1 行内に異なるフォントやサイズを使用している場合は、オプティカルカーニングオプションを使用してカーニングを調整します。オプティカルカーニングでは、文字の形状に基づいて、隣接する文字の間隔が調整されます。
Adobe Photoshop での行と文字の間隔: https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html

上記の通り、メトリクスカーニングはフォント自体に情報が設定されている場合にのみ利用でき、しかも設定されている文字の種類も限られている場合もあるため、フォントの情報に依存せずに設定するためにはオプティカルカーニングを利用する必要があるようです。
文字の種類の多い和文フォントではペアカーニングが設定されていない組み合わせも多そうですので、こちらを使うほうがいいかもしれません。

プロポーショナルメトリクス

こちらの記事（少しの工夫でグッと良くなる！タイポグラフィTIPS｜kyon｜note）で紹介されているのを見て初めて知りましたが、OpenTypeで選択できるカーニングの機能で、日本語特有の文字幅や仮想ボディを考慮した自動も自爪で、日本語のデザインではぜひ使いたいカーニング方法です。

font-feature-settings: “palt” とは？

フォントデータとして使われることの多いOpenTypeのフォントですが、このOpenTypeには文字の形以外にもたくさんの情報が内蔵されています。
その中でも拡張タイポグラフィの機能を有効化して利用できるのが、font-feature-settingsです（参考: font-feature-settings – CSS: カスケーディングスタイルシート | MDN）。
OpenTypeの設定なので、基本的にはOpenTypeを利用したときでなければ利用できません。（※ OpenTypeやTrueTypeを圧縮することで生成されるWEBフォント用のフォントデータであるWOFFやWOFF2もフォントによってはFireFoxでは利用できるようです（参考: WOFF (Web Open Font Format) – 開発者ガイド | MDN）。

“palt”は別名を Proportional Alternate Widths と呼び、それぞれの文字の幅に合わせてカーニングを調整する機能で、和文フォントで威力を発揮します（参考: Registered features, p-t (OpenType 1.8.4) – Typography | Microsoft Docs）。

文字詰め方法としては、PhotoshopやIllustratorのOpenType用の設定で利用できるプロポーショナルメトリクスと近い仕組みのようです。
日本語の場合、文字の種類や大きさが複雑なので、利用できるのであれば利用したい機能です。