文字のデザインは、フォントを選ぶことだけではありません。サイズ、太さ、行間、行の長さ、段落、見出し、背景とのコントラストが組み合わさって読みやすさを作ります。

文字設計の優先順位

  1. 内容を短く整理する
  2. 見出し階層を作る
  3. 本文のサイズと行間を決める
  4. 読みやすい行長にする
  5. 太さと色で役割を補助する
  6. スマホと文字拡大で検証する

読みにくい長文をフォントだけで解決しようとしません。

フォントを選ぶ基準

  • 日本語の文字が揃っている
  • 小さいサイズでも字形を判別しやすい
  • 必要な太さがある
  • 数字、英字、日本語のバランスがよい
  • 読み込み速度と利用許諾を確認できる
  • 代替フォントでも崩れにくい

ブランド用の個性的な書体は大見出しに限定し、長文本文には読みやすい書体を使う方法があります。

文字サイズは環境で確認する

Web本文は16px前後を出発点にできますが、絶対的な正解ではありません。細い書体、低いコントラスト、長い行では同じサイズでも読みにくくなります。

Appleも、書体の太さが可読性へ影響し、細いウェイトではより大きなサイズを検討するよう案内しています。

行間と段落

本文の行間は1.5〜1.8程度から始め、書体と対象者で調整します。3行以上続く文章に詰まった行間を使うと、次の行を追いにくくなります。

段落は一つの論点に絞り、段落間の余白を行間より大きくします。

行を長くしすぎない

デスクトップで本文を画面いっぱいに広げると、次の行の先頭を探しにくくなります。本文コンテナに最大幅を設けます。日本語は書体や内容によって異なるため、文字数を固定値として盲信せず実際に読みます。

見出し階層を作る

見出しは大きさだけでなく、前後余白と太さで階層を表します。H2の下にH4を直接置くなど構造を飛ばさず、HTMLの見出し要素と見た目を一致させます。

役割見た目の差内容
ページタイトル最大・太いページ全体の主題
大見出し大・前余白大主要な章
小見出し本文より太い章内の論点
本文標準説明
注記少し小さくても高コントラスト条件・補足

スマホで大きすぎる見出しを防ぐ

見出しを固定の巨大サイズにすると、一文字ずつ折り返されます。画面幅に応じて滑らかに変わるサイズを使い、長い日本語タイトルで確認します。本文を小さくして帳尻を合わせません。

文字拡大で確認する

WCAG 2.2では、支援技術なしで文字を200%まで拡大しても内容や機能を失わないことが基準に含まれます。文字がカードからはみ出す、ボタンラベルが欠ける、固定高で隠れる問題を確認します。

まとめ

読みやすい文字は、少数のフォント、十分なサイズ、適切な行間、短すぎない段落、制限した行長、明確な見出し階層で作ります。PCだけで決めず、スマホと文字拡大で確認しましょう。