このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
トラッキング — CSS の用語では letter-spacing — は、ひと続きのテキストのすべての文字のあいだの空間を一律に調整することで、個々のペアを調整するカーニングとは区別されます。この章の2005年版は、画面上のテキストブロックにはわずかな字間の拡大を推奨していました。粗いピクセルレンダリングが字形を密集させるため、少しの空気が助けになる、という理屈です。その助言は当時のレンダリング環境の産物であり、一般則としてはもはや成り立ちません。更新された立場はより条件つきです。トラッキングはサイズに依存する道具であり、活字スケールの両端では役立ち、本文が住まう中間ではたいてい害になります。
2005年以降に変わったこと
3つのことが、もとの推奨を覆しました。第一に、レンダリングが改善しました。2005年、画面用フォントは粗いグリッドにヒンティングされ、字間はピクセル単位でしか調整できませんでした — もとのテキストはその制約を明示的に指摘しています。サブピクセルの位置決め、高密度ディスプレイ、小数の CSS 値(letter-spacing: 0.01em は完全に合法です)が、密集の問題と整数の制限の両方を取り除きました。画面向けに設計された本文書体は、いまや意図された字間に収まっており、それを開くというデザイナー側の根拠はおおむね蒸発しました。
第二に、研究の構図が成熟し — そして整然としなくなりました。ディスレクシアのある読者に対する字間拡大の研究は2010年代初頭に広く注目を集め、子どもの読書速度と正確さに意味のある向上を報告するものもありました。しかしその後の研究の結果はまちまちです。効果は読者、書体、言語、そして字間が語間とどう相互作用するかによって変わります。ロービジョンの読者についても、エビデンスは同様に両義的です — 追加の間隔はクラウディング(周辺視野と低視力の視覚における実在の知覚現象)を減らしうる一方、行を長くし、単語どうしを引き離し、それ自体のコストを伴います。2026年時点での誠実な要約はこうです。字間の拡大は、一部の読者を、一部の条件で助ける。そして万人に利益をもたらす普遍的な設定は存在しない。これは、妥協案をスタイルシートに焼き込むことに反対し、読者が自分自身の設定を適用できるようにすることを支持する論拠です。
第三に、まさにそれを WCAG が正式化しました。達成基準 1.4.12 テキストの間隔(WCAG 2.1 および 2.2 のレベル AA)は、ユーザーが適用するフォントサイズの0.12倍の字間 — 0.16em の語間、1.5 の行間とともに — に、コンテンツや機能の損失なく耐えることを要求します。デザイナーの義務は完璧なトラッキングを選ぶことではありません。読者が自分の設定を選んだときに生き残るレイアウトを築くことです。
トラッキングはサイズに依存する
この章で最も息の長い原則は、適切なトラッキングがサイズに反比例して変わる、というものです。書体デザイナーはフォントの字間を想定サイズの範囲に合わせて設計します。その範囲から大きく外れてテキストを組むとき、字間には補正が必要になります。
小さなサイズ — キャプション、脚注、データラベル、UI のマイクロコピー — では、字形はメトリクス上正しくても知覚的には密集し、小さな正のトラッキング(100分の1〜2エム程度)が判読性を本当に改善します。オールキャップスとスモールキャップスの設定は最も強い事例です。大文字は小文字の単語の先頭に立つために設計されたのであって、互いに隣り合うためではありません。大文字のみのラベルは、ほぼ例外なく字間を開くことで恩恵を受けます。多くの場合、100分の5〜10エムです。
本文サイズでは、デフォルトの字間がデザイナーの意図であり、そこからの逸脱はたいてい損失です。正のトラッキングは単語の形 — 読者が高速な単語認識に使う「bouma」の輪郭 — を弱め、単語の境界を知らせる字間と語間のコントラストを薄めます。本文サイズでの負のトラッキングはさらに悪く、ロービジョンの読者を最も害する密集を再び持ち込みます。
ディスプレイサイズでは、補正は逆転します。大きな見出しは、メトリクスがより小さなサイズ向けに調整されているため、デフォルトの字間では緩く見えることが多く、わずかな負のトラッキングがそれを引き締めます。これは洗練であって要件ではなく、ユーザーが本文として読むサイズにまで拡大しうるテキストには決して適用してはなりません。
バリアブルフォント対機械的トラッキング
機械的トラッキング — 別のリズムのために描かれたグリフのあいだに一律の空間を挿入すること — は常に妥協です。バリアブルフォントはより良いものを提供します。オプティカルサイズ軸を備えた書体は、サイズに応じて実際の描画そのものを変えます。小さなオプティカルサイズは広い字間、頑丈なストローク、大きなエックスハイトを持ち、ディスプレイサイズは引き締まり、洗練されます。軸が存在すれば、ブラウザは font-optical-sizing: auto によってこれを自動で適用します。バリアブルフォントがオプティカルサイズ(あるいは、よりまれに専用のグレード軸や字間の軸)を提供する場合は、手動の letter-spacing よりそちらを選んでください。デザイナーが、一律の詰め物ではなく、サイズごとの字間を全体として解決してくれているのです。機械的トラッキングは、静的なフォントと、どの軸も扱わないオールキャップスのラベルのような慣習のためのフォールバックとして残ります。
実践上の注意
letter-spacing は常に em 単位で指定し、フォントサイズとともにスケールするようにしてください。16px で控えめなピクセル値は、ユーザーがズームやテキスト拡大を行うと破壊的になります。加えられたトラッキングは事実上カーニングペアを上書きすることも忘れないでください — 値を小さく保つべきもうひとつの理由です。そしてすべてのコンポーネントを 1.4.12 の上書き値のもとでテストしてください。幅固定のコンテナに入った、字間を開いたナビゲーションラベルは、読者が自分の 0.12em を加えたときにテキストが切り取られたり破壊的に折り返されたりする、よくある場所です。
CSS では
p { letter-spacing: normal; } /* body text: hands off */
.caps-label { letter-spacing: 0.08em; } /* open short caps runs */
/* Must survive the WCAG 1.4.12 user override without breaking:
letter-spacing: 0.12em applied to all text */推奨事項
- 本文にトラッキングをかけない。書体のデフォルトの字間が正しいデフォルトである。
- ごく小さなテキストには控えめな正のトラッキング(おおよそ 0.01〜0.02em)を、オールキャップスやスモールキャップスのラベルにはより多く(おおよそ 0.05〜0.1em)を加える。
- わずかな負のトラッキングは大きなディスプレイサイズでのみ、かつユーザーが拡大したサイズで結果を確認した後にのみ適用する。
- 機械的トラッキングよりも、オプティカルサイズ軸を持つバリアブルフォントを選ぶ。font-optical-sizing を有効にする。
- すべての letter-spacing は em 単位で指定し、ピクセルは決して使わない。
- ユーザーが WCAG 1.4.12 の間隔の上書きを適用したとき、切り取り、重なり、機能の損失がないことを検証する。
- 間隔のパーソナライゼーションを読者の特権として扱う。単一の「アクセシブルな」トラッキング値ではなく、許容性を築く。