【実務・中級編】インライン要素の文字間隔とカーニング – HTML実践ガイド

フロントエンドの現場で、「デザインデータとブラウザ上の見た目が微妙に違う」という指摘を受けた経験はありませんか？

特に、デザイナーがこだわった見出しや、ブランドの顔となるキービジュアルにおいて、その違和感の正体は十中八九「タイポグラフィ」の解像度の差です。SketchやFigmaで設定されたletter-spacingが、ブラウザ上でそのまま再現されているように見えて、実は裏側で全く異なる挙動をしている……。

今回は、中級エンジニアの皆さんが避けては通れない「文字間隔（letter-spacing）」と「カーニング（font-feature-settings）」の深淵について、実務的な知見を交えて解説します。

—

CSSの `letter-spacing` は、文字と文字の間に指定した間隔を「機械的に」挿入するプロパティです。しかし、ここで注意すべきは「文字の左右に余白を足している」というブラウザの挙動です。

例えば、`letter-spacing: 0.1em;` を指定したとき、最後の文字の右側にも0.1emの余白が生まれます。これをセンタリングしようとしたり、絶対配置でレイアウトを組むと、目視での中央揃えがズレる原因になります。

/ 解決策：最後の文字の右余白をネガティブマージンで相殺するテクニック /
.title-text {
letter-spacing: 0.1em;
/ 最後の文字の右側にある余白を打ち消す /
margin-right: -0.1em;
}

この「最後の余白問題」は、LPのメインビジュアルやUIのボタンラベルで地味に効いてきます。細かい調整を厭わない姿勢が、最終的な「プロダクトの質」を底上げするのです。

—

`letter-spacing` はあくまで「全体」を均一に広げるものですが、日本語や欧文において、文字同士の「詰め」を最適化するには `font-feature-settings` が不可欠です。

特に欧文フォントでは、`’kern’`（カーニング）を有効にすることで、`A` と `V` のような組み合わせにおいて、フォント自体が持つ「最適な隙間」をブラウザにレンダリングさせることができます。

.typography-pro {
/ 欧文フォントのカーニングを有効化 /
font-feature-settings: “kern” 1;

/ 日本語フォントの場合、プロポーショナルメトリクスを有効化 /
/ これにより、約物（句読点や括弧）の余白が適切に詰められます /
font-feature-settings: “palt” 1;

/ 併用する場合のベストプラクティス /
font-feature-settings: “kern” 1, “palt” 1;
}

※注意点として、一部のOSやブラウザの組み合わせでは、`font-feature-settings` の値が正常に反映されないケースが稀にあります。現在は `font-kerning: normal;` を併記するのがモダンな作法です。

—

最後に、見出し（h1-h3）や強調文（strong）で、可読性と美しさを両立させるためのセットアップを紹介します。

/
.heading-main {
font-size: 2rem;
letter-spacing: 0.05em; / 詰めすぎない、ゆとりある現代的な間隔 /
line-height: 1.5; / 行間もletter-spacingに合わせて微調整 /

/ フォントの特性を引き出すプロパティ群 /
font-kerning: normal;
font-feature-settings: “kern” 1, “palt” 1;

/ Safari対策：フォントのアンチエイリアスを綺麗に /
-webkit-font-smoothing: antialiased;
}

/ 強調要素などは少しだけ間隔を詰めることで引き締まる /
strong {
letter-spacing: 0.02em;
font-weight: 700;
}

—

フロントエンドエンジニアの仕事は、単なる「デザインの再現」ではありません。ブラウザという、OSやデバイスによって解釈が異なる不確定なキャンバスの上で、「制作者の意図をいかにしてユーザーに届けるか」というコミュニケーションです。

「たかが文字間隔」と切り捨てるのは簡単ですが、その0.01emのこだわりが、ユーザーの目に触れた瞬間の「何かこのサイト、綺麗だぞ？」という無意識の信頼感に直結します。

まずは明日、皆さんが実装しているコンポーネントの `letter-spacing` を、0.05em単位で見直してみてください。その小さな変化が、あなたのコードを「職人の仕事」へと昇華させるはずです。

現場からは以上です。また次の技術トピックでお会いしましょう。