The Universal Web

2.1 単語の大文字・小文字

連続するテキストにはセンテンスケースが依然として正しい — しかし単語形状による説明は死んだ。読者は文字を並列に認識しており、オールキャップスが遅く読まれるのは、シルエットではなく、習熟と文字の類似性によるものである。

14 min read

このページはAIの支援を受けて翻訳されました。正文は英語の原文です。

この章の実践的な助言は20年間変わっていません。連続するテキストはセンテンスケース(文頭のみ大文字)で組み、大文字は短く、意図的な用途のために取っておくこと。決定的に変わったのは、その説明です。この文書の Version 1 は気まずい岐路に立っていました。Kevin Larson による2004年の単語認識研究のレビューを引用しながら、タイポグラファーたちは「実務的および歴史的な理由から」古い単語形状モデルに寄りかかり続けている、と注記していたのです。20年を経て、岐路は解消しました。単語形状モデルはもはや生きた科学的立場ではなく、タイポグラフィにとっては、正しいモデルがなぜ同じ実践的ルールをもたらすのかを理解するほうが有益です。

2005年以降に変わったこと

単語形状の物語 — 小文字の単語がアセンダーとディセンダーで形づくる輪郭、いわゆる「Bouma shape」としばしば結びつけられます — は、熟練した読者はなじみのある単語をシルエットで認識し、オールキャップスが読みにくいのはすべての単語が区別のつかない長方形になるからだ、と説いていました。直感的で、教えやすく、20世紀のほぼすべてのタイポグラフィの教科書で繰り返されました。この文書がもともと依拠した1998〜2005年の文献も含めてです。

引退した単語形状モデル — 小文字の Reading は特徴的なシルエットとして輪郭が描かれ、オールキャップスの READING は均一なブロックになる — 直感的で、そして誤り。読者は文字を並列に認識する。

エビデンスはこのモデルを十分に支持したことがなく、Larson が要約した心理学の文献はその後、合意へと固まりました。単語の認識は並列文字認識によって進みます。各固視のあいだ、視覚系は単語を構成する文字を同時に識別し — 一文字ずつでも、ゲシュタルト的な輪郭としてでもなく — 単語の同一性は、文脈と予期に制約されながら、その文字レベルの証拠から組み上げられます。かつて単語形状に有利に見えたいくつかの古典的知見は、このモデルのもとでより明快に説明されます。単語優位効果(文字は、単独や非単語の中でよりも、実在の単語の中でのほうが正確に認識される)は、文字レベルと単語レベルの処理の相互作用を反映するのであって、シルエットの照合ではありません。また読者は、大文字・小文字を交互にしたテキスト(LiKe ThIs)を、形状モデルの予測よりはるかにうまく処理します — 形は破壊されているのに、読みは生き残るのです。遅くはなりますが、機能します。

では、なぜ研究においてオールキャップスのテキストは決まってやや遅く読まれるのでしょうか。理由は2つあり、どちらもシルエットではありません。第一に習熟です。私たちが子どもの頃から読んできたほぼすべては、小文字を主体に組まれており、読書速度はなじみの深さに追随します。注目すべきことに、オールキャップスのテキストで読者を訓練した研究では、練習とともにその不利が縮小しました — 大文字が本質的に読めないのだとすれば説明が難しく、小文字が単に私たちの過剰学習した形式なのだとすれば容易に説明がつきます。第二に文字の弁別性です。大文字は小文字より均質で — 高さが似通い、幅が似通い、共有される垂直線と長方形のストロークが多く — 個々の文字を見分けるのにわずかに長くかかります。そして並列文字認識の速さは、最も遅い証拠に律速されます。小文字は高さ、エクステンダー、構造において互いに異なり、識別プロセスにより多くの特徴的な手がかりを与えるのです。

実践的なルールは、理論の交代を無傷で生き延びました。ここで立ち止まる価値があります。これは、誤った説明を捨てながら正しい実践を保持した、分野の健全な一例なのです。

センテンスケースの更新された論拠

連続するテキスト — 段落、記事、読者が一文以上のあいだ住まうあらゆるもの — において、センテンスケースは現在のあらゆる根拠で勝ちます。

  • 小文字は個々により弁別しやすいため、文字認識の機構がより速く動く。
  • 小文字は、読者が読み書きのできる人生の全体を通じて練習してきたものである。なじみの深さは実在する、複利で効く利点であり、余力の最も少ない読者 — ロービジョン、ディスレクシア、読みの流暢さが限られた人々 — にとって最も強く働く。
  • オールキャップスは同じポイントサイズでおよそ30〜40%多くの水平方向の空間を占め、実効的な行長を縮めるか、より小さなサイズを強いる — どちらも認識速度とは独立した可読性のコストである。
  • 長く続く大文字は文化的な信号を帯びる。それは叫びとして読まれ、判読性の問題ではない場合でも、理解とトーンの問題になる。
スクリーンリーダーの挙動が、現代的な脚注を加えます。ほとんどのスクリーンリーダーはオールキャップスのテキストを許容できる程度に処理しますが、一部の構成では大文字の文字列を一文字ずつ読み上げたり、大文字化された単語を頭字語として誤読したりします。大文字化がスタイル上のものである場合は、コンテンツに大文字を打ち込むのではなく、通常のケースのソーステキストに CSS の text-transform: uppercase を適用してください — スタイリングは表示層にとどまり、元のテキストは誠実なままで、下流の消費者(スクリーンリーダー、翻訳、検索、コピー&ペースト)は本物の単語を受け取ります。

大文字がいまも居場所を持つところ

以上のどれも大文字を追放するものではありません。範囲を定めるだけです。短いラベル、ボタン、ナビゲーション項目、小さな見出し、略語、道案内のテキストは、正当なオールキャップスの領域です — 1〜3語の設定で、認識が連続的ではなく一瞥で行われ、大文字の均一なテクスチャが意図的なデザインの声になりうる場所です。職人上の要件は、伝統がずっと教えてきたものと同じです。字間を加えること(おおよそ 0.05〜0.1 em)。大文字は小文字と混ざる前提で字間が設計されており、互いに並ぶためではないからです。文字列を短く保つこと。そして開いた、区別しやすい字形を持つウエイトとサイズを選ぶことです。

スモールキャップスには、Version 1 が与えたよりも寛大な評決が下ります。それを避けよというもとの助言は、実のところ偽物のスモールキャップス — ひょろひょろのストロークと窮屈な字間を持つ、縮小しただけの大文字 — を避けよという助言でした。デザイナーによって描かれ、実際にそれを含むフォントで font-variant-caps: small-caps を通じて呼び出される本物のスモールキャップスは、略語と小見出しのための洗練された道具です。ルールは、この文書全体で繰り返されるルールです。デザイナーが描くべきだったものを、ソフトウェアに合成させないこと。フォントに本物のスモールキャップスがないなら、スモールキャップスを使わないことです。

見出しについては、センテンスケースが静かにプラットフォーム戦争を制しました — 主要なインターフェイスガイドラインはタイトルケースからセンテンスケースへと漂移してきました — そしてそれはアクセシブルなデフォルトです。走査しやすく、ローカライゼーションに優しく、タイトルケースが書き手に課す「どの語を大文字にするか」という曖昧さから自由なのです。

CSS では

/* Caps are a style, not typed characters */
.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* caps need air */
  font-size: 0.75rem;
}
.abbr-smallcaps { font-variant-caps: all-small-caps; }

推奨事項

  • 連続するテキストはすべてセンテンスケースで組む。単語形状の根拠は失われたが、実践は有効である。
  • ルールを正しく説明する。並列文字認識、習熟の効果、大文字どうしの類似性 — シルエットではなく。
  • オールキャップスは短いラベル、ナビゲーション、多くても数語の小さな見出しのために取っておく。
  • オールキャップスの設定にはおおよそ 0.05〜0.1 em の字間を与える。小文字の本文に装飾として字間を加えることは決してしない。
  • スタイル上の大文字化は text-transform で適用し、スクリーンリーダーと再利用のためにソーステキストは通常のケースに保つ。
  • スモールキャップスは、フォントが本物のスモールキャップスを含む場合にのみ font-variant-caps を通じて使う。合成されたものは決して使わない。
  • 見出しとインターフェイスのテキストには、タイトルケースよりセンテンスケースを選ぶ。
  • Bouma shape による説明をスタイルガイドとデザイン教育から引退させる。正しい理論は、より息の長い実践を生む。

参考文献