文字を大きくするだけではない：見出し・本文・余白で読む順序を作る

読みやすい文章は、すべての文が目立つ文章ではない。どこから読み始め、どの文が新しい話題を開き、どの説明が同じまとまりかを把握しやすい文章だ。文字の大きさ、太さ、段落の間隔を合わせて調整すると、装飾が少なくても読む順序を作れる。

まず内容をまとめてから大きさを決める

地域の展示会の案内を例にしよう。展示名、日時と場所、観覧方法、補足説明を一つの塊にすると、最初に何を見るか分かりにくい。展示名をタイトルにし、観覧方法は別の見出しの下にまとめる。見出しは内容の構造を表し、単に文字を大きくするための道具にはしない。

W3Cの見出し構造の案内は、見出しの階層が文書の構成と移動に使われると説明する。ウェブでは見た目の大きさだけでなく、実際の見出し要素も正しく使おう。見出しに見える太字の文と、スクリーンリーダーが見出しとして認識する文は違う場合がある。

大きさ・太さ・余白の何が必要か

小見出しと本文の大きさが同じでも、太さと間隔で区別できる。反対に、とても大きな小見出しを本文に密着させると、関係が不自然になることがある。重要な見出しには明確な差を付け、同じ階層には同じ表現を繰り返して、読者が規則を覚えられるようにする。

出発点の一例は本文18ピクセル、小見出し24ピクセルを試し、小見出しの前後の間隔を調整することだ。これは正解の比率でも、すべてのサイトの最低規則でもない。書体の実際の文字の高さ、画面幅、言語、読者の環境で見かけの大きさや適切な間隔は変わる。完成画面で文章を読みながら決めよう。

強調を減らすと重要な情報が見える

日時、場所、観覧方法をすべて太字にすると、相対的な強調がなくなる。読者がすぐに探すべき情報から選ぶ。案内なら日時と場所を短く分け、長い説明は通常の本文にする方法がある。リンクはリンクと分かるように表し、役割を色だけで区別しない。

行間が狭すぎると文がくっついて見え、広すぎると段落のつながりが弱くなる。W3Cの視覚的表現の説明は、表示を読者に合わせられる条件を扱う。このアクセシビリティ基準を、ある文字サイズ一つが全員に十分という主張として読まないようにしよう。

完成画面で読むテストをする

スマートフォンと広い画面で、タイトルと小見出しだけを順に見る。文章の順序が理解できるか、日時と場所をすぐ見つけられるか確認する。次に本文を拡大し、文字の切れや要素の重なりがないか調べる。翻訳ではタイトルの長さも変わるので、改行も確認するとよい。

余白がもったいなく見えても、すべてを埋める必要はない。同じ話題は近くにまとめ、新しい話題の前には息をつける間隔を置く。数値の大きさより、読者が内容の関係を理解し、必要な文へ移動できるかが判断基準だ。内容の構造が変わったら、文字のスタイルも合わせて調整し直そう。