CSSでカーニングを調整する方法【font-kerningプロパティの使い方】

この記事では、CSSを使ってカーニング（文字詰め）を調整する方法を解説します。

Webフォントにカーニングデータが含まれている場合、ブラウザは自動的にその適用の可否を判断します。この判断は、CSSの font-kerning プロパティによって制御されており、初期値は auto に設定されています。

font-kerning: auto;

つまり、フォント自体にカーニングデータが組み込まれていても、何らかの理由でブラウザ側の判断によりカーニングが適用されないことがあるのです。

カーニングを確実に有効にするには

フォントがカーニングデータを持っている場合、ブラウザの判断に関わらず確実に適用したいときは、auto の代わりに normal を指定します。

font-kerning: normal;

カーニングを無効にするには

逆にカーニングをオフにしたい場合は、値として none を使用します。

font-kerning: none;

「せっかくカーニングデータがあるのに、なぜ無効にするのか？」と疑問に思うかもしれません。

実は、特定のブラウザでのみカーニングの描画が崩れるといったケースがあります。一時的なブラウザのバグなどが原因の場合、無効化できる選択肢があるのは非常に便利です。

また、単発のテキスト要素だけが特定の状況下で不自然な表示になることもあります。そんなときは、ユーティリティクラスを作成しておけば、必要な箇所だけ簡単にカーニングをオフにできます。

.kerning-none {
  font-kerning: none;
}

Webフォントがカーニングデータを持っているか確認する方法

お使いのWebフォントにカーニングデータが含まれているかどうかを手軽に調べるには、none と normal を切り替えて、ブラウザ上のテキスト表示の変化を注意深く観察するのが効果的です。カーニングのオン・オフで文字間隔が変化すれば、そのフォントにはカーニングデータが含まれていることになります。