【CSS Modules】font-kerningプロパティの使い方

font-kerningプロパティは、テキストの文字間に適用されるカーニング情報を制御するプロパティです。カーニングとは、特定の文字の組み合わせにおいて、文字と文字の間のスペースを自動的に調整し、視覚的なバランスと可読性を向上させるための技術を指します。このプロパティは、特に欧文フォントにおいて、文字が不自然に離れて見えたり、逆に詰まりすぎたりするのを防ぎ、単語全体の見た目を美しく整える役割を果たします。

このプロパティには主に3つの値が指定可能です。normalを指定すると、フォント自体に含まれるカーニング情報が有効になり、ブラウザはその情報に基づいて文字間のスペースを調整します。これにより、デザイナーが意図した通りの文字の並びが再現され、特に見出しやロゴ、本文中の強調テキストなど、タイポグラフィの品質が求められる場面で高い効果を発揮します。一方、noneを指定すると、カーニング情報の適用を完全に無効にし、文字間が均一に保たれます。これは、特定のデザイン要件や、カーニングが逆に視認性を損ねると判断される場合に利用されます。また、autoはブラウザにカーニングの適用判断を委ねる値ですが、現代のブラウザでは通常normalと同じ挙動を示します。

font-kerningプロパティは、ウェブサイトのタイポグラフィの質を高め、ユーザーにとってより読みやすいコンテンツを提供するために重要です。ただし、すべてのフォントがカーニング情報を持っているわけではない点や、ブラウザによるサポート状況に違いがある点には注意が必要です。使用するフォントや対象ブラウザを考慮し、テストを通じて最適な設定を見つけることが推奨されます。

Copy
1p {
2  font-kerning: normal;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません