font-kerning：フォントの文字詰め（カーニング）を制御する

font-kerningプロパティの説明

font-kerningは、フォントの文字詰め（カーニング）を制御します。カーニングとは、欧文の組版で発達した技法で、文字同士の間隔をどれだけ取るのかを表す言葉です。ある一定の規則に従って文字を配列することによって、視認性や可読性を高める効果があります。

半角スペースで区切られた単語同士の間隔は、word-spacingで調整します。連続する文字同士の間隔は、letter-spacingで調整します。

font-kerningに指定できる値

auto

カーニングするかどうかをブラウザの判断に任せます。多くの場合、指定されたフォントの既定値に依存します。これが初期値です。

normal

カーニングを適用するように要求します。フォントがカーニングに対応していれば有効であり、対応していなければ無効となります。

none

カーニングを使用しないように要求します。ブラウザはフォントにカーニング情報があっても適用しません。

font-kerningの使い方とサンプル

font-kerningプロパティの構文は以下の通りです。

/* キーワード値 */
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* グローバル値 */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: unset;

font-kerningの実例

それでは実際にfont-kerningプロパティの書き方を見ていきましょう。以下の例は、欧文フォントのカーニングを有効にした場合と、そうでない場合の比較です。主にペアカーニングの対象となっているアルファベットの組み合わせを確認します。

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
	font-size: 1.6rem;
}
#ff_serif {
	font-family: "Times New Roman", serif;
}
.fk_on {
	font-kerning: normal;
}
.fk_off {
	font-kerning: none;
}

<section class="samp_box" id="ff_serif">
	<h2>font-kerning: normal;</h2>
	<p class="fk_on">ABCDEFG. LAToTrTaTuTeTyWaWAWeWoYaYoyo.</p>
	<h2>font-kerning: none;</h2>
	<p class="fk_off">ABCDEFG. LAToTrTaTuTeTyWaWAWeWoYaYoyo.</p>
</section>