font-kerning
フォントに組み込まれたカーニング情報(文字ペア間の間隔調整データ)の使用を制御するプロパティです。auto、normal、noneの3つの値を持ち、タイポグラフィの品質に直接影響します。特に見出しや大きなテキストでは、カーニングの有無が読みやすさに大きく影響します。
概要
フォントに組み込まれたカーニング情報(文字ペア間の間隔調整データ)の使用を制御するプロパティです。auto、normal、noneの3つの値を持ち、タイポグラフィの品質に直接影響します。特に見出しや大きなテキストでは、カーニングの有無が読みやすさに大きく影響します。
対応ブラウザ
デスクトップ
Chrome 33+
Edge 79+
Safari 9+
Firefox 32+
モバイル
Chrome Android 33+
Safari iOS 9+
Firefox Android 32+
基本構文
CSS
h1, h2 {
font-kerning: normal;
}
.monospaced {
font-kerning: none;
} 実務での使いどころ
-
見出しのタイポグラフィ最適化
大きなフォントサイズの見出しでカーニングを有効にし、AV、WAなどの文字ペアの間隔を美しく調整します。
注意点
- カーニングの適用はパフォーマンスに影響する場合があるため、大量のテキストノードでの使用は慎重に検討してください。
アクセシビリティ
- カーニングは視覚的な美しさのためのものであり、スクリーンリーダーには影響しません。letter-spacingとの併用で読みやすさを調整できます。