字間 (トラッキング)

テキスト中の文字と文字の間隔。CSS の letter-spacing プロパティで制御し、可読性やデザインの印象に影響する。カーニングが特定の文字ペアの調整であるのに対し、字間は全体の均一な調整。

字間 (じかん、letter-spacing / tracking) は、テキスト中の文字と文字の間の距離です。カーニングが「AV」「To」のような特定の文字ペアの間隔を個別に調整するのに対し、字間 (トラッキング) はテキスト全体の文字間隔を均一に広げたり狭めたりする調整です。CSS では letter-spacing プロパティで制御します。

日本語の組版では、字間の標準はゼロ (ベタ組み) です。漢字やひらがなは正方形のボディに収まるようデザインされており、文字を隙間なく並べるだけで均等な間隔になります。一方、英語のテキストは文字ごとに幅が異なるため、フォントに組み込まれたメトリクス (文字幅情報) に基づいて自動的に間隔が調整されます。

見出しやロゴでは、字間を広げる (正のトラッキング) ことで高級感や開放感を演出できます。逆に、字間を狭める (負のトラッキング) と密度感や緊張感が生まれます。日本語の見出しでは letter-spacing: 0.1em0.2em 程度の字間を空けるのが一般的で、本文より少し広い字間が読みやすさと美しさを両立します。

字間は文字数カウントには影響しませんが、「同じ文字数のテキストが占める物理的なスペース」に大きく影響します。名刺に収まる文字数、ポスターの見出しに使える文字数、ボタンのラベルに入る文字数は、すべて字間の設定に依存します。字間を 0.1em 広げるだけで、10 文字のテキストは約 1 文字分長くなります。

アクセシビリティの観点では、WCAG 2.1 の達成基準 1.4.12 (テキストの間隔) は、ユーザーが字間を 0.12em 以上に変更してもコンテンツが損なわれないことを求めています。固定幅のコンテナに文字を詰め込んでいると、字間を広げた際にテキストがはみ出したり重なったりする問題が発生します。

CSS の letter-spacing は継承されるプロパティです。親要素に設定した字間は子要素にも適用されるため、見出しに広い字間を設定すると、その中のリンクテキストにも同じ字間が適用されます。意図しない字間の継承を防ぐには、子要素で明示的に letter-spacing: normal を指定する必要があります。

この記事を共有