タイポグラフィの基本とデザイン活用術｜初心者向け完全ガイド

タイポグラフィとは、書体・文字サイズ・行間・字間・行の長さを設計して、読みやすく意図の伝わるテキストを組む技術です。「センスが必要」と思われがちですが、Webにおける可読性の大部分は数値で決められます。しかもその数値には、W3Cが公開している明確な基準があります。

この記事では、感覚論を排して「何文字で折り返すか」「行間はいくつか」を数字で決める手順を示します。最後に、組んだテキストが実際に読みやすいかを検証する方法まで通します。

タイポグラフィは感覚ではなく数値で決められる

多くの解説が「読みやすい行間を心がけましょう」で終わりますが、それでは実装できません。W3Cのアクセシビリティ基準には、具体的な数値が書かれています。

W3Cが示す4つの数値

WCAG 2.2の達成基準1.4.8「Visual Presentation」と1.4.12「Text Spacing」に、テキストの見た目に関する具体値が定められています。

1.4.8はレベルAAAなので必須ではありませんが、「読みやすさの目安として何を見ればよいか」の答えがそのまま書かれている点に価値があります。1.4.12はレベルAAなので、実務では満たしておきたい基準です。日本語訳はWAICがWCAG 2.2 日本語訳として公開しています。

なぜ日本語だけ「40文字」なのか

欧文が80文字なのに対し、CJK（中国語・日本語・韓国語）は半分の40文字と明記されています。理由は文字あたりの情報量と字幅の違いです。

日本語の文字はほぼ正方形（全角）で、欧文の1文字よりおよそ2倍の幅を占めます。さらに漢字は1文字が単語相当の情報を持つため、同じ40文字でも読解にかかる負荷が違います。結果として、物理的な行の長さは欧文80文字とほぼ同じになるという設計です。

行が長すぎると、行末から次の行頭へ視線を戻すときにどの行に戻ればよいか分からなくなり、読み飛ばしや読み直しが増えます。逆に短すぎると視線の折り返し回数が増えて疲れます。40文字はその中間にある実用値です。

4つの数値を決める順番

決める順番が重要です。フォントサイズから決めると行長が破綻します。行長を先に固定してから、その中でサイズと行間を調整してください。

ステップ1｜行長（1行の文字数）を先に決める

日本語の本文なら1行35〜45文字を目標にします。ここで使えるのが em 単位です。日本語の全角文字は幅がほぼ 1em なので、max-width: 40em と書けばおよそ40文字で折り返します。

注意点として、欧文向けの ch 単位は日本語では使えません。ch は数字の「0」の幅を基準にする単位で、これは半角幅です。日本語の全角文字は約2倍あるため、max-width: 40ch と書くと実際には20文字程度で折り返してしまいます。

ステップ2｜フォントサイズは16px以上から

本文は16px以上にします。14px以下は可読性が落ちるうえ、スマートフォンのSafariでは入力欄が自動ズームする原因にもなります。

画面幅に応じて連続的に変えたい場合は clamp() を使います。メディアクエリで何段も上書きするより保守が軽くなります。具体的な書き方はCSSでフォントを指定する完全ガイドにまとめています。

ステップ3｜行間は本文1.7〜1.9、見出し1.2〜1.4

WCAGの下限は1.5倍ですが、日本語は漢字の画数が多く字面が詰まって見えるため、1.7〜1.9のほうが読みやすくなります。欧文中心のサイトをそのまま日本語化すると窮屈に見えるのはこれが理由です。

見出しは逆に詰めるのが定石です。1.2〜1.4にすると塊として認識されやすくなり、本文との差が明確になります。行間は必ず単位なしの数値で指定してください。line-height: 28px のように単位を付けると、その値が子要素にそのまま継承され、サイズの違う要素で行間が破綻します。

ステップ4｜字間は本文で触らない

本文の letter-spacing は0〜0.02em程度に留めます。読みやすさのために広げたくなりますが、日本語は元々の字送りが設計されているため、大きく広げると単語のまとまりが崩れて逆効果です。

一方見出しはマイナスの字間が効きます。-0.02em 程度詰めると締まった印象になります。大きい文字ほど字間が間延びして見えるためです。

見出しの階層はサイズ比で決める

本文の4つの数値が決まったら、次は見出しです。h2・h3のサイズを場当たりに決めると階層が伝わりません。基準となる比率を1つ決めて、そこから機械的に算出します。

比率を1つ決めて掛け算する

本文サイズに一定の比率を掛け続けて各見出しのサイズを出す考え方を「モジュラースケール」と呼びます。本文16pxを起点にした例です。

1.25倍は落ち着いた印象、1.414倍（白銀比）はメリハリの効いた印象になります。読み物中心のサイトは1.25前後、ランディングページのように強弱を付けたい場合は1.4以上が向きます。比率そのものの考え方は黄金比・白銀比・白金比の使い方で詳しく扱っています。

サイズ差より「余白差」のほうが効く

見出しを目立たせようとサイズばかり上げる人が多いのですが、階層を伝えているのは実はサイズではなく余白です。

原則は「見出しの上の余白を、下の余白より大きく取る」こと。見出しは直後の本文とセットで1つの塊なので、上を広く下を狭くすると、どこからどこまでが1セクションかが視覚的に伝わります。逆に上下均等だと、見出しがどちらの文章に属するのか分からなくなります。

目安は上の余白が下の2〜3倍です。サイズを上げなくても、これだけで階層はかなり明確になります。

CSSでの実装

ここまでの4つの数値をまとめると、次のようになります。そのままコピーして出発点にできます。

/* 本文の器：行長を先に固定する */
.article-body {
  /* 全角40文字ぶん。日本語では ch ではなく em を使う */
  max-width: 40em;
  margin-inline: auto;
  padding-inline: 1rem;
}

.article-body p {
  /* 16pxを下限に、画面幅で18pxまで流体化 */
  font-size: clamp(1rem, 0.948rem + 0.221vw, 1.125rem);
  line-height: 1.8;          /* 単位なしで指定する */
  letter-spacing: 0.02em;    /* 本文は触りすぎない */
  text-align: left;          /* 両端揃えにしない */
  margin-block-end: 1.8em;   /* 段落間は行間より広く取る */
}

.article-body h2 {
  font-size: clamp(1.5rem, 1.19rem + 1.33vw, 2.25rem);
  line-height: 1.35;         /* 見出しは詰める */
  letter-spacing: -0.02em;   /* 大きい文字はマイナスで締める */
  /* 上の余白を下の約3倍に。階層はサイズより余白で伝わる */
  margin-block-start: 3em;
  margin-block-end: 1em;
}

max-width を em で指定しているのがポイントです。フォントサイズを変えると器の幅も連動して変わるため、文字数はおよそ40文字に保たれます。px で固定すると、サイズを上げたときに1行の文字数が減りすぎます。

余白そのものの設計はWebデザインにおけるホワイトスペースの重要性、カンプ前に決めておくべき数値はデザインカンプ前に決めるWebデザインのルールで扱っています。

【検証】組んだテキストが本当に読めるか確かめる

CSSを書いたら、必ず実物で確認します。数値どおりに書いたつもりでも、実際の行長は親要素の幅やフォントによって変わります。

確認の手順と合否ライン

1. 1行の文字数を実際に数える：PCの通常表示で本文を1行選択し、文字数を数える。合否＝35〜45文字に収まっていること
2. ブラウザを200%まで拡大する：合否＝横スクロールバーが出ず、文字が重ならないこと（WCAG 1.4.8の要件）
3. 行間を1.5倍・字間を0.12emに上書きしてみる：DevToolsのStylesで一時的に当てる。合否＝文字が要素からはみ出したり重なったりしないこと（WCAG 1.4.12のAA要件）
4. 実機のスマートフォンで開く：合否＝1行が20文字前後に収まり、文字が小さすぎないこと
5. ページを縮小表示して全体を眺める：合否＝見出しと本文が塊として区別できること（区別できないなら行間かサイズの差が足りない）

3番目は見落とされがちですが、レベルAAの達成基準なので実務では満たしておきたい項目です。高さを固定したボタンやカード内のテキストで、真っ先に破綻します。

不合格だった場合の直し方

やりがちな失敗

見た目を整えようとした結果、かえって読みにくくなるパターンです。

両端揃えで整えようとする

text-align: justify は行の右端が揃うので一見きれいですが、WCAG 1.4.8では「両端揃えにしない」と明記されています。単語間の空きが行ごとにバラつき、縦方向に白い川（リバー）ができて視線が乱れるためです。日本語は約物の調整も入るため、意図しない間延びが起きます。

長文を中央揃えにする

中央揃えは行頭の位置が毎行変わるため、視線が次の行頭を探す手間が増えます。3行を超えるテキストには使わないでください。キャッチコピーや見出しなど、1〜2行で完結する箇所に限定するのが安全です。

見出しと本文で同じ行間を使う

body に line-height: 1.8 を書いたきり、見出しに上書きしていないケースです。見出しは文字が大きいぶん、同じ倍率では行間が開きすぎて塊に見えません。2行以上になる見出しで特に目立ちます。見出しには必ず個別に行間を指定してください。

書体を増やしすぎる

1ページで使う書体は2種類までが目安です。見出しと本文で分けるか、1書体のウェイト違いで階層を作れば十分に成立します。書体が増えるほど統一感が失われ、読み込むWebフォントの容量も増えます。書体選びの基準はWebデザインのためのフォント選び完全ガイド、比率で余白や大きさを決める考え方は黄金比・白銀比・白金比の使い方を参照してください。

まとめ

タイポグラフィで最初に効くのはセンスではなく、行長・サイズ・行間・字間の4つを数値で決めることです。

• W3Cは1行の幅を欧文80文字・CJK（日本語）は40文字と明示している
• 行長は max-width: 40em で決める。日本語に ch は使えない（半角基準のため約半分になる）
• 本文は16px以上。行間は本文1.7〜1.9・見出し1.2〜1.4で、単位なし指定
• 字間は本文で触らない。見出しはマイナスで締める
• 両端揃えにしない。長文の中央揃えも避ける
• 組んだら1行の文字数を数え、200%拡大と行間上書きで壊れないか確かめる

まずは自分のサイトの本文で1行の文字数を数えてみてください。50文字を超えていたら、それだけで読みにくさの主因になっています。

よくある質問（FAQ）

Q. タイポグラフィとは何ですか？

書体・文字サイズ・行間・字間・行の長さを設計し、読みやすく意図の伝わるテキストを組む技術です。感覚的なものと思われがちですが、Webにおける可読性の大部分は数値で決められます。W3CのWCAG 2.2にも、1行の幅や行間について具体的な基準値が定められています。

Q. 日本語の1行は何文字が読みやすいですか？

WCAG 2.2の達成基準1.4.8では、1行の幅は80文字以下、CJK（日本語・中国語・韓国語）は40文字とされています。実務では35〜45文字を目標にすると外しません。日本語の全角文字は欧文の約2倍の幅を占め、漢字は1文字あたりの情報量も多いため、欧文の半分の文字数で同等の行の長さになります。

Q. 行長を指定するとき ch と em のどちらを使いますか？

日本語では em を使ってください。ch は数字の「0」の幅を基準にする単位で、これは半角幅です。日本語の全角文字は約2倍の幅があるため、max-width: 40ch と指定すると実際には20文字程度で折り返してしまいます。全角文字の幅はほぼ 1em なので、max-width: 40em と書けばおよそ40文字で折り返します。

Q. 行間（line-height）の適切な値は？

WCAGの下限は1.5倍ですが、日本語の本文は1.7〜1.9が読みやすくなります。漢字の画数が多く字面が詰まって見えるためです。見出しは逆に1.2〜1.4と詰めると塊として認識されやすくなります。指定は必ず単位なしの数値で行ってください。px などの単位を付けると、その値が子要素にそのまま継承され、サイズの違う要素で行間が破綻します。

Q. 両端揃え（justify）は使わないほうがよいですか？

使わないほうが安全です。WCAG 2.2の達成基準1.4.8には「テキストを両端揃えにしない」と明記されています。単語間の空きが行ごとにばらつき、縦方向に白い帯（リバー）ができて視線が乱れるためです。日本語では約物の調整も加わるため、意図しない間延びが起こりやすくなります。本文は左揃えを基本にしてください。