タイポグラフィの解像度を上げる：letter-spacingとfont-kerningの「正しい」制御術
フロントエンドエンジニアの仕事は、単にデザインをコードに落とし込むことではありません。ブラウザという名の「出力装置」の特性を理解し、デザイナーが意図した「空気感」を、環境に依存せず再現することです。
今回は、CSSのタイポグラフィ制御の中でも、特に「文字間隔」という繊細な領域にフォーカスします。多くのエンジニアが感覚で設定しがちな `letter-spacing` と、見落とされがちな `font-kerning` について、現場のリアルな知見を共有しましょう。
—
1. letter-spacingの「罠」と正しい向き合い方
`letter-spacing` は文字の間隔を広げたり詰めたりするプロパティですが、ここに一つ大きな「落とし穴」があります。それは、「文字間隔の最後にも余白が追加される」という仕様です。
なぜこれが問題なのか？
例えば、中央揃え（`text-align: center`）のボタンや見出しに `letter-spacing: 0.1em;` を適用すると、視覚的には右側に余分な隙間が生まれます。結果として、厳密には「中央」からわずかにズレてしまうのです。
このズレを解消する、現場でよく使われるテクニックがこちらです。
.letter-spacing-fix {
/ 0.1emの余白を付与 /
letter-spacing: 0.1em;
/
右端の余白を打ち消すためのハック。
text-indentに同じ値を指定することで、
全体を擬似的に補正します。
/
text-indent: 0.1em;
}
「なぜこれで直るのか」と疑問に思うかもしれません。`text-indent` は先頭行のインデントですが、`letter-spacing` による末尾の余白とバランスを取ることで、見た目上の重心を中央に戻すことができます。ただし、厳密なレイアウト調整が必要な場合は、`span` 要素で囲って個別に制御する方が確実です。
—
2. font-kerning：ブラウザに「プロの組み版」をさせる
次に、意外と設定されていないのが `font-kerning` です。
日本語や欧文フォントには、特定の文字の組み合わせ（例：’A’と’V’など）で間隔を自動調整する「カーニング情報」が含まれています。ブラウザのデフォルトでは、パフォーマンスを優先してこれがオフ、あるいは自動（auto）になっていることが多いのですが、美しいタイポグラフィを目指すなら `normal` を指定すべきです。
.typography-pro {
/ ブラウザにフォントのカーニング情報を活用させる /
font-kerning: normal;
/
さらに、欧文の場合は font-variant-ligatures を併用すると、
‘fi’ や ‘fl’ などの合字（リガチャ）が有効になり、
格段に洗練された印象になります。
/
font-variant-ligatures: common-ligatures;
}
これを適用するだけで、特に見出しなどの大きな文字において、文字同士の「食い込み」が自然になり、プロ仕様の組み版に近づきます。
—
3. 実践：現場で使える「最強の見出しスタイル」
これらを組み合わせ、タイトルやロゴ周りに使える実践的なコードを紹介します。
.headline-master {
/ 1. フォント本来のカーニングを有効化 /
font-kerning: normal;
/ 2. 視認性を考慮した少し広めの字間 /
letter-spacing: 0.05em;
/ 3. 行間（line-height）との黄金比を意識 /
line-height: 1.5;
/
font-feature-settings を使って、
日本語フォントの「プロポーショナルメトリクス」を有効にする。
これにより、句読点やカッコの無駄な余白を詰めることができます。
/
font-feature-settings: “palt” 1;
}
現場からのアドバイス
`font-feature-settings: “palt” 1;` は強力ですが、すべてのフォントで綺麗に動くわけではありません。特に、Webフォント（Google Fontsなど）を使う場合は、フォント自体がそのデータを持っているかを確認してください。
また、`letter-spacing` を極端に広げすぎると、アクセシビリティの観点（特に読字障害を持つ方への配慮）から可読性が落ちます。「広げても0.2emまで」というのが、僕がチームメンバーに共有している「読みやすさ」の限界ラインです。
—
まとめ
1. `letter-spacing` の右端の余白には注意せよ。 厳密な中央寄せが必要なら `text-indent` で補正するか、要素の設計を見直す。
2. `font-kerning: normal` は必須。 ブラウザ任せにせず、CSSで強制的にONにすることでタイポグラフィの質が劇的に変わる。
3. `font-feature-settings: “palt” 1;` で日本語の組み版を整える。 これにより、句読点問題が解決し、クオリティがワンランク上がる。
フロントエンドの仕事は「コードを書くこと」以上に「細部への執着」に宿ります。たかが文字間、されど文字間。こうした細かいこだわりを積み重ねた先にしか、ユーザーの心を動かす「美しいWebサイト」は存在しません。
ぜひ次の実装から、これらのプロパティを意識的に使い分けてみてください。現場からは以上です！
コメント