このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
カーニングは特定の2文字の間の空きの調整であり、語間は行を横切る単語と単語の間隙のリズムです。どちらも同じ目標に仕えています。目が暗い塊や白い穴につまずくことなく、滑らかな掃引でテキストの中を進めるだけの、十分に均一なテクスチャーです。2005年、この章は、スペーシングの品質は書体とレンダリングエンジンにほぼ委ねられており、画面上の両端揃えは可読性を低下させると論じました。20年を経て、第一の主張は大幅な改訂を必要としています。第二の主張は、ひとつ重要な注意点を伴いつつ、今も有効です。
2005年から変わったこと
オリジナルの版は、カーニングをウェブにはほとんどできないものとして扱っていました。フォントは粗いピクセルグリッドにラスタライズされ、カーニングペアはしばしばブラウザーに無視され、デザイナーはその放置に耐える書体を選ぶよう言われていました。その世界は消えました。すべての現代的なブラウザーは、デフォルトで本文にOpenTypeのカーニングを適用します — CSSプロパティ font-kerning のデフォルトは auto で、本文サイズでカーニングデータを有効にします — そしてサブピクセル配置により、その調整は実際にレンダリングされます。実践的な助言は反転しました。もはやカーニングのために戦う必要はありません。それは受け継がれるものであり、あなたの仕事はそれを壊さないことです。
第二の大きな変化は規制上のものです。WCAG 2.1は達成基準1.4.12 テキストの間隔(レベルAA、WCAG 2.2にも引き継がれています)を導入しました。これは、ユーザーがスペーシングを上書きしたとき — 具体的には字間をフォントサイズの0.12倍、語間を0.16倍にし、行間と段落の間隔も増やしたとき — に、コンテンツが機能や内容を失わないことを要求します。これはスペーシングを全面的に捉え直すものです。それはデザイナーが一度だけ下す美的判断ではなく、読者が変更する権利を持つ変数なのです。ユーザーがこれらの上書きを適用したときに切り詰めたり重なったりする、固定の高さのコンテナ、窮屈なボタン、切り捨てられやすいラベルは、アクセシビリティの失敗です。出荷前に、テキストスペーシングのブックマークレットやブラウザー拡張機能でレイアウトをテストしてください。
第三に、CSSはいまや本物の制御手段を公開しています。word-spacing プロパティは単語間の間隙を直接調整し、letter-spacing は字間の調整(次章参照)を扱い、font-kerning と font-feature-settings はOpenTypeの挙動への明示的なアクセスを与えます。さらに新しい text-wrap: pretty は、行分割により多くの労力を費やすようブラウザーに求め — 孤立した単語や不適切な分割点を避け — 手作業の介入なしに、行末揃えでないテキストのスペーシングのテクスチャーを静かに改善します。
実践におけるカーニング
カーニングがデフォルトで有効になっている以上、残る失敗の大半は自ら招いたものです。強い正の letter-spacing は、追加された空きの中にカーニングペアを溺れさせることで、実質的にそれを無効化します。本文への字間の追加が危険である理由のひとつです。出来の悪いディスプレイフォントは今も貧弱なカーニングテーブルのまま出荷されており、見出しサイズではその間隙は目立ちます — 大文字のTやVに小文字の母音が続く、古典的な問題ペアです。ディスプレイサイズでは個々のペアを手で修正するのは妥当ですが、書体が絶え間ない修正を必要とするなら、それは間違った書体です。
2005年の懸念のひとつは本物として生き残っています。フォントの品質は今も重要です。バリアブルフォントとプロフェッショナルに制作されたウェブフォントは、一般に行き届いたスペーシングとカーニングのデータを備えていますが、出所の不確かなフリーフォントはしばしばそうではありません。候補の書体は、見本の1行ではなく、実際の段落を組んで評価してください。
語間と両端揃え
オリジナルの知見 — 両端揃えは画面上の可読性を低下させる — は、通常の形では今も正しいのですが、そのメカニズムには正確さが求められます。完全な両端揃えは、単語間のスペースを伸縮させることで各行を固定の行長に強制します。ハイフネーションがなければ、アルゴリズムが使える分割点はわずかしかなく、一部の行は洞窟のような語間を抱えることになります。その間隙が連続する行にわたって垂直に積み重なると、段落を流れ落ちる白い空間の「川」を形成します。川は醜いだけではありません。水平の読みの経路と競合し、安定したスペーシングの手がかりに頼る読者 — 多くのディスレクシアの読者を含む — が不釣り合いに大きな影響を受けます。不均一な語間は、目が次のサッカード(跳躍運動)を計画するための傍中心窩のプレビューを妨げるのです。
印刷は何世紀も前に、ハイフネーションと両端揃えの連携によってこれを解決しました。ウェブも原理的には同じことができるようになりました。CSSの hyphens: auto はほとんどのブラウザーで辞書ベースのハイフネーションを有効にし、両端揃えのテキストのスペーシングのばらつきを劇的に減らします。しかしブラウザーの両端揃えは、プロフェッショナルなページレイアウトソフトウェアにある段落レベルの最適化ではなく、依然として単純な行単位のアルゴリズムです。そのため、ハイフネーションを施した両端揃えのウェブテキストでも、よく組まれた書籍の均一さに並ぶことはめったにありません。実際的な結論はこうです。画面での読書には、行末揃えでない(左揃えの)テキストをデフォルトにすること。デザインが本当に両端揃えを必要とするなら、ハイフネーションを有効にし、行長にゆとりを持たせ、狭い幅で結果を検査してください — 狭いカラムの両端揃えのテキストこそ、川の繁殖地です。
また、WCAG 2.2の達成基準1.4.8 視覚的提示(レベルAAA)が、テキストブロックへの要件のひとつとして「テキストを両端揃えしない」を明示的に挙げていることにも注意してください。多くのチームが目標とするAAレベルにおいてさえ、これは標準の作成者たちがどこに着地したかを示す強いシグナルです。
デザイン変数としての語間
本文で word-spacing を直接操作する必要はめったにありません — 書体に組み込まれたスペースのグリフはたいてい正しいのです — が、周辺的なケースでは役に立ちます。オールキャップスのナビゲーションラベルで語間をわずかに開いたり、デフォルトのスペースが大きすぎて見える大きなディスプレイ用途で詰めたりする場合です。いかなる調整も、テキストとともにスケールするようem相対の単位で指定すべきであり、1.4.12が義務づけるユーザーの上書きに耐えなければなりません。あなたが選んだスペーシングちょうどでしか機能しないレイアウトは、機能していないのです。
CSSでは
body {
font-kerning: normal; /* on by default — never disable it */
text-align: left; /* justification without hyphenation makes rivers */
}
p { text-wrap: pretty; }
/* If justification is required, hyphenate: */
.justified { text-align: justify; hyphens: auto; }推奨事項
- 本文はデフォルトで行末揃えなし(左揃え)にすること。完全な両端揃えは、hyphens: auto と狭い幅でのテストを要する例外として扱うこと。
- font-kerning はデフォルトのままにすること。カーニングを無効にせず、カーニングペアを圧倒するような強い letter-spacing を避けること。
- サポートされている環境では本文に text-wrap: pretty を使い、ほぼゼロのコストで分割点とスペーシングのテクスチャーを改善すること。
- word-spacing や letter-spacing の調整は必ずem単位で指定し、ピクセルでは決して指定しないこと。
- レイアウトがWCAG 1.4.12の上書き — 字間0.12em、語間0.16em、行間1.5 — に、切り詰め、重なり、内容の喪失なしに耐えることを検証すること。
- 完全なカーニングとスペーシングのテーブルを持つ書体を選ぶこと。見本ではなく、組まれた段落で判断すること。