【入門編】letter-spacingとカーニング – HTML実践ガイド

Web制作の世界へようこそ！HTMLやCSSを触り始めると、最初は「文字を出すこと」だけで精一杯ですよね。でも、少し慣れてくると「なんだか文字が窮屈だな」「もっと洗練された印象にしたいな」という、“デザインの欲”が湧いてくるはずです。

今日は、そんなあなたのWebサイトをワンランク上の“プロの仕上がり”に見せる、魔法のスパイス「文字間隔（カーニング）」についてお話ししますね。

—

文字と文字のあいだ、「空気」をデザインしよう

皆さんは、高級ホテルのパンフレットや、洗練されたブランドのロゴを見たとき、「なんだか読みやすいし、品があるな」と感じたことはありませんか？

実は、その秘密は文字の「間隔」にあります。Webデザインでは、これを「カーニング（Kerning）」や「文字詰め」と呼びます。文字と文字の間に適切な“空気”を入れるだけで、情報の読みやすさは劇的に変わるんです。

1. letter-spacing：文字に呼吸をさせる

一番手軽に文字の間隔を広げたり詰めたりできるのが、CSSの`letter-spacing`というプロパティです。

例えば、見出しなどで「あえて文字の間隔を広げて、余裕を持たせたい」というとき、このプロパティが活躍します。

.hero-title {
/ 文字と文字のあいだに0.1em（文字の大きさの10%分）の隙間を作る /
letter-spacing: 0.1em;

/ これだけで、少し大人っぽい、抜け感のある印象になります /
}

「どれくらい広げればいいの？」と迷うかもしれませんが、まずは `0.05em` ～ `0.1em` くらいから試してみてください。ほんの少し調整するだけで、文字が「息を吸い込んだ」ように、スッと読みやすくなる瞬間が必ずあります。

—

「フォントにお任せ」する機能：font-kerning

さて、ここからが少しだけ“通”な話です。実は最近のデジタルフォントには、文字と文字の形に合わせて、自動的に隙間を微調整する「カーニング情報」というものが組み込まれています。

例えば、「A」と「V」という文字。この二つを並べると、形が斜めなので放っておくと隙間が空きすぎて見えますよね。これをプロのデザイナーは、パズルのように組み合わせて隙間を埋めます。

これをブラウザに自動でやってもらうのが、`font-kerning` です。

.text-body {
/ ブラウザに「フォントが持っているカーニング情報を活用して！」と指示します /
font-kerning: normal;
}

「え、これだけでいいの？」と思うかもしれませんが、特に英語（アルファベット）を使うときには絶大な効果を発揮します。標準ではブラウザが気を利かせてくれることも多いですが、あえて明示的に `normal` を指定することで、より美しいタイポグラフィを実現できるんですよ。

—

現場でよくある失敗と、解決のヒント

ここで少し、初心者がつまづきやすいポイントをフォローしておきますね。

「あれ？文字がガタガタに見える…」

`letter-spacing` を使って文字間隔を広げたとき、PC画面では綺麗なのに、スマホで見ると「特定の文字だけ不自然に空いている」ように見えることがあります。これは、フォントそのものの特性によるものです。

解決策：
完璧を求めすぎないことも大切です。「このデバイスでは0.05em、こっちでは0.08em」と細かく指定しすぎると管理が大変になります。まずは、「本文はあまりいじらない（読みやすさ優先）」「見出しなどの短いテキストで遊ぶ」というルールを持つだけで、デザインの失敗はグッと減りますよ。

HTMLの要素とセットで覚えよう

`letter-spacing` は、`` や `` と組み合わせると非常に強力です。