解説

行間や字間を広げると崩れる？読みやすさを保つレイアウトの確認手順

行間や字間を変えても文字が欠けない設計を、固定高さ・段落余白・折り返しの観点から整理。確認用CSSとチェック手順を用意したよ。

文字を少し大きくしたり、行間を広げたりしたら、カードの下から文章がはみ出した。見た目を整えるための固定高さが、読む人の設定とぶつかることがあるよ。今回はWeb画面で、文字間隔が変わっても情報が欠けないかを確かめる手順をまとめるね。

見た目の数値だけで合否を決めない

WCAGの文字間隔の解説は、利用者が行の高さを文字サイズの1.5倍、段落後の間隔を2倍、字間を0.12倍、単語間隔を0.16倍に変更しても、情報や機能が失われないことを扱っている。言語や文字体系で使わない間隔の扱いにも例外がある。

これは、初期デザインを必ずその数値にするという指定ではないよ。最適な見た目を一つ決める話と、読む人が調整しても使えることを分けよう。

文字の調整、箱の伸縮、情報の欠けを確認する図

最初に見るのは、短いカード、ボタン、ラベル、見出し。本文より小さい領域ほど、1行増えたときの余地が足りなくなりやすい。高さを固定して文字を隠すと、元の画面では整っていても、必要な説明が読めなくなる。

次は通常のCSSで作った本文を確認するための例。検証用ページの本文領域にだけ適用し、画面を比較しよう。すべての複雑な部品を検査できる自動テストではないよ。

.spacing-test {
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}
.spacing-test p {
  margin-block-end: 2em;
}

子要素に別の指定があると上書きされるので、ブラウザの開発ツールで実際に適用された値も確認する。本文だけでなく、カード内の見出しやリンクも対象にしよう。

内容量が変わる領域では、固定heightを外せるか、min-heightで最低限の高さだけそろえられるかを考える。長い見出し、狭いスマホ幅、文字間隔の変更を組み合わせて見よう。カードの高さを一律にそろえることより、全文と操作が使えることを優先する場面もあるよ。

仕上げは、調整前後の両方でリンクやボタンを操作する。配色も合わせて見直したいなら、文字のコントラスト確認も参考にしてね。