このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
タイポグラフィの階層は、一文も読まれる前に、そのページが何についてのものか、どう構成されているか、どこから読み始めればよいかを読者に伝えます。2005年版は、階層の各レベルのサイズを1.2から1.5の一貫した比率で決めることを推奨し、基本サイズの選択を誤るとスケーリング時に破綻すると警告しました。どちらの指摘も生き残っていますが、それぞれに、当時は扱いようのなかった第二の次元が加わりました。スケールはいまや固定ではなくフルイドであり、そしてウェブ上の階層はもはや視覚的なものだけではありません。読者のかなりの割合はそれを目にすることがないため、階層は構造的でもなければならないのです。
2005年から変わったこと
1.2〜1.5の比率という推奨は、いまや標準的な実践となったモジュラー・タイプスケールへと成熟しました。ページ上のすべてのサイズを、基本サイズにひとつの比率を繰り返し掛けることで導出する手法です。よく使われる比率には音程に由来する名前が付いています — 1.2(短3度)、1.25(長3度)、1.333(完全4度)、1.5(完全5度)。当初の範囲は今もまさに正しく、ひとつの洗練が加わりました。比率は媒体に合わせるべきだ、ということです。密度の高いプロダクトのインターフェイスや長文の読み物には、穏やかな比率(1.125〜1.25)が向いています。巨大な見出しを生まずに十分な数の異なるサイズが得られるからです。エディトリアルやマーケティングのページなら1.333や1.5にも耐えられます。データの多いアプリケーションで60ピクセルのh2を生成する比率は、その文脈には間違った比率です。
より大きな技術的変化は、スケールがもはや固定された数値の集合である必要がないことです。CSSのclamp()は、スケールの各段をフルイドにできます。最小値、ビューポート相対の推奨値、最大値で定義されたサイズによって、見出しはブレークポイントで飛び移るのではなく、スマートフォンとデスクトップの間を滑らかにスケールします。よく作られたフルイドスケールは、実質的に小さな画面では小さな比率を、大きな画面では大きな比率を使うことになります — これは印刷のデザイナーが常にディスプレイ用の文字を紙面に合わせて調整してきたやり方と一致します。ひとつ、アクセシビリティ上の注意が不可欠です。ビューポート相対の中間項は、rem ベースの成分と混ぜなければなりません(たとえば rem と vw を組み合わせた計算)。純粋なビューポート単位は禁物です。vw だけで指定されたテキストはユーザーのフォントサイズ設定を無視し、ブラウザーのテキスト拡大にも応答せず、WCAGのサイズ変更とリフローの要件を損ないます。すべての clamp() 式は、基本サイズを200%に設定したユーザーを尊重すべきです。
スケーリング時の挙動に関する初版の警告 — 切り詰められたフレーム、消えるボタンラベル、150%で崩れる読み順 — は、いまや成文化されています。WCAGは、テキストが200%まで損失なく拡大できること(1.4.4 テキストのサイズ変更)と、コンテンツが320 CSSピクセルでリフローすること(1.4.10)を要求しています。「スケーリングを想定してデザインせよ」という昔の助言は、いまや単に適合要件です。
階層は視覚的なだけでなく、構造的でなければならない
この章への最も重要な追加は、目に見えないものです。スクリーンリーダーのユーザーは、ある行が32ピクセルの太字であることを知覚しません。彼らが知覚するのは、それが特定のレベルの見出し要素であるか — ないか — です。スクリーンリーダーのユーザーは日常的に、見出しの一覧を呼び出してその間をジャンプすることでページを移動します。「見出し」が単に拡大された太字の段落にすぎないページは、彼らに何の構造も提供しません。これこそが、WCAGの達成基準1.3.1 情報及び関係性(レベルA)が要求していることです。視覚的な表現によって伝えられる情報 — 階層を含む — は、プログラムによっても判別可能でなければなりません。
実践上の規律は2つの半分から成ります。第一に、視覚的な見出しはすべて本物の見出し要素(h1からh6)でなければならず、見出しレベルは文書のアウトラインを反映しなければなりません。ページの主題にひとつのh1、主要セクションにh2、その下位セクションにh3、そして下る途中でレベルを飛ばさないこと。第二に — ここがデザイナーの最も間違えやすいところですが — セマンティックなレベルと視覚的なサイズは切り離さなければなりません。正しい見出しレベルは文書構造が決め、正しいサイズはデザインが決めます。両者が衝突するとき(控えめに見せたいh2、目立たせるに値するh4)は、構造上のレベルを保ち、クラスでスタイルし直してください。デフォルトのサイズを理由にタグを選ぶことが、ウェブ上の壊れたアウトラインの大半の根本原因です。
サイズを超えた階層
2005年版の章は、階層をサイズの問題として扱いました。成熟した実践は、この仕事を4つの変数 — サイズ、ウエイト、余白、色 — に分散させます。そしてサイズは、その中でしばしば最も効率の悪いものです。フォントウエイトの一段の引き上げ(たとえば400から600)や、見出しの上の余白の帯は、垂直方向のスペースを消費したり小さな画面を窮屈にしたりすることなく、サイズの跳躍と同じくらい明確に新しいセクションを合図できます。これは経済性だけでなくアクセシビリティにも関わります。サイズだけに寄りかかった階層は、ディスプレイサイズを縮めざるを得ない狭いビューポートで崩壊しがちですが、ウエイトと余白による差別化はどんなビューポートでも生き残ります。バリアブルフォントはウエイトを連続的な軸にするので、中間のウエイトを、あるレベルに必要なコントラストへ正確に調整できます。色や副次的な手がかりに階層を単独で担わせてはいけません — それらは構造的なマークアップと少なくとももうひとつの視覚的シグナルの上に重ねるべきものであり、見出しのテキストも依然としてコントラスト要件を満たす必要があります。
現代的な細部の改良を2つ。複数行の見出しには text-wrap: balance が有効です。行長を均等にし、見出しの最終行に単語がひとつだけ取り残されるのを防ぎます — 長年の手作業による改行調整を置き換える、小さなCSS宣言です。また、見出しの行間はスケールの各レベルで狭めに設定すべきであり(前章のとおり、おおよそ1.1〜1.25)、本文から継承させてはいけません。
初版が主張したとおり、基本サイズは依然として最重要です。スケール全体がそこから掛け算されるのですから。現代の下限は、本文についてブラウザーのデフォルトである1rem(デフォルトで16px)です — ピクセルではなく必ずremで設定し、ユーザーの設定が伝播するようにします。長文の読み物では1.125〜1.25remのほうが適していることも多いでしょう。
CSSでは
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }推奨事項
- コンテンツの密度に合わせて選んだ、おおよそ1.2〜1.5の比率のモジュラースケールからサイズを構築すること。
- clamp()でスケールをフルイドにし、推奨値には必ずrem成分を混ぜて、ユーザーのフォントサイズ設定が尊重されるようにすること。
- WCAG 1.3.1に従い、論理的なアウトラインの中で本物の見出し要素を使うこと — h1はひとつ、レベルは飛ばさない。サイズを理由にタグを選ばないこと。
- セマンティクスと見た目を切り離すこと。構造とデザインが食い違うときは、見出しレベルをクラスでスタイルすること。
- サイズだけでなくウエイトと余白でも階層を表現すること。サイズや色だけに依存する階層は避けること。
- 本文は相対単位で最低1remに設定し、階層が200%のテキスト拡大と320pxのリフローに耐えることを検証すること。
- 見出しには text-wrap: balance と狭めた行間を適用すること。