【CSS】font-kerningとは？カーニングの仕組みとletter-spacingとの違いを解説

投稿日 2026年9月1日
著者くまだ
カテゴリー Web制作

どうも、くまだです。

CSSでカーニングを制御するfont-kerningプロパティについてのメモ。

font-feature-settingsについてはこちら。

カーニングとは？CSSでの文字詰めの仕組みを整理

カーニングとは、特定の文字の組み合わせに応じて、字間を個別に調整する仕組みのことです。

たとえば「AV」「To」「ファ」のような組み合わせは、そのまま並べると視覚的に間が空いて見えます。カーニングは、そういった「目で見たときに不自然に感じる組み合わせ」をフォントデータ側であらかじめ補正しています。

CSSのfont-kerningプロパティは、「そのフォントが持っているカーニング情報を使うかどうか」を制御するものです。

font-kerningで指定できる値は3つ。

auto：デフォルト。ブラウザの判断に委ねます。カーニングをいつ適用するかはブラウザの実装に依存
normal：フォントが持つカーニング情報を適用します。
none：カーニングを無効化。

  <section class="demo">
    <h2>検証1：font-kerning の3値（欧文・72px）</h2>
    <p class="demo-hint">
      <code>none</code> はペア補正なしで字間がスカスカに見える行。
      <code>normal</code> / <code>auto</code> は「AVA」「To」「Wa」などが詰まって締まって見えるはず。
    </p>

    <div class="kern-row">
      <span class="kern-tag">none</span>
      <span class="kern-sample k-none">AVATAR To Wave Yo.</span>
    </div>
    <div class="kern-row">
      <span class="kern-tag">normal</span>
      <span class="kern-sample k-normal">AVATAR To Wave Yo.</span>
    </div>
    <div class="kern-row">
      <span class="kern-tag">auto</span>
      <span class="kern-sample k-auto">AVATAR To Wave Yo.</span>
    </div>
  </section>

.demo {
  margin: 0 0 48px;
  padding: 20px 24px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.demo h2 {
  font-size: 18px;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.demo-hint {
  font-size: 13px;
  color: #777;
  margin: 0 0 20px;
}

.demo-hint code {
  background: #f3f3f3;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* 各比較行：左ラベル＋右サンプルを揃えて並べる */
.kern-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-top: 1px dashed #eee;
}
.kern-row:first-of-type {
  border-top: none;
}

.kern-tag {
  flex: 0 0 130px;
  font-size: 12px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: #b00;
  white-space: nowrap;
}

/* 欧文サンプル：差が出やすいよう大サイズ＋カーニングペア豊富なディスプレイセリフ
   ※ Playfair Display は大文字のカーニング（AV / WA / To 等）が顕著なフォント */
.kern-sample {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1.1;
  white-space: nowrap;
}

.k-none {
  font-kerning: none;     /* カーニングを完全無効化（ペア補正なし） */
}
.k-normal {
  font-kerning: normal;   /* フォントのカーニング情報を必ず適用 */
}
.k-auto {
  font-kerning: auto;     /* ブラウザ判断（多くの場合 normal 相当） */
}

font-kerning と letter-spacing の違い

letter-spacingはすべての文字間を同じ幅だけ広げる（または狭める）。

「全体的にゆったりさせたい」「トラッキングを変えたい」ときに使います。

font-kerningは「AとVの間だけ少し詰める」といった、文字ペアごとの細かい補正を担います。フォントにカーニング情報が入っていないと何も変わらないため、効果が出るかどうかはフォントに依存します。

プロパティ	何をするか	調整の単位
font-kerning	フォントの「カーニングペア情報」を使うかどうかを制御	文字の組み合わせごとに個別調整
letter-spacing	すべての文字間に一律のスペースを追加	全文字に均等に適用

  <section class="demo">
    <h2>検証2：font-kerning vs letter-spacing</h2>
    <p class="demo-hint">
      <code>font-kerning</code> は「AVA」など特定ペアだけ補正。
      <code>letter-spacing</code> は<strong>全部の字間</strong>を一律で広げ／詰めする（補正のかかり方が別物）。
    </p>

    <div class="kern-row">
      <span class="kern-tag">kerning: normal</span>
      <span class="kern-sample k-normal">WAVE Toyota LT.</span>
    </div>
    <div class="kern-row">
      <span class="kern-tag">spacing: 0.1em</span>
      <span class="kern-sample k-ls-wide">WAVE Toyota LT.</span>
    </div>
    <div class="kern-row">
      <span class="kern-tag">spacing: -0.05em</span>
      <span class="kern-sample k-ls-tight">WAVE Toyota LT.</span>
    </div>
  </section>

.k-ls-wide {
  font-kerning: none;       /* ペア補正は切って、均等調整だけを見る */
  letter-spacing: 0.1em;    /* 全字間を一律で広げる */
}
.k-ls-tight {
  font-kerning: none;
  letter-spacing: -0.05em;  /* 全字間を一律で詰める */
}