字間 (トラッキング)

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

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

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

見出しやロゴでは、字間を広げる (正のトラッキング) と開放感が出て、狭める (負のトラッキング) と密度感が出ます。日本語の見出しは本文より少し広めにすることが多いものの、ちょうどよい値はフォントの字幅や文字種によって変わります。大きな正の値を与えると単語がばらばらの文字の並びに見え、大きな負の値では文字が重なって判読できなくなります。すべてのフォントで判読性を保てる万能な値は存在しないため、実際の表示を見て個別に決めるのが確実です。

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

アクセシビリティの観点では、WCAG 2.1 の達成基準 1.4.12「テキストの間隔」(適合レベル AA) が関係します。この基準は、行の高さをフォントサイズの 1.5 倍、段落の後の間隔を 2 倍、字間を 0.12 倍、単語の間隔を 0.16 倍に設定しても、コンテンツと機能が失われないことを求めています。制作者がこの値で表示しなければならないという意味ではなく、ユーザーが自分で上書きしたときに壊れないことが要件です。固定幅のコンテナに文字を詰め込んでいると、字間を広げた際にテキストがはみ出したり重なったりします。行間 (行送り) とまとめて確認しておくと、この基準の 4 項目を一度に押さえられます。

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

初期値の normal と 0 は見た目が同じでも意味が違います。normal はブラウザが両端揃えのために字間を調整することを許しますが、0 のように長さで指定すると、揃えのための調整は行われなくなります。また字間に 0 以外の値を指定すると、ブラウザは liga のような任意の合字 (リガチャ) を適用しなくなります。字間の微調整を カーニング の代わりに使うと、合字が外れて欧文の見た目が崩れることがあります。アラビア文字のように字が連結する文字体系では、字間を空けると文字のつながりが壊れるため、適用そのものを避けます。

この記事を共有