タイポグラフィの最小ルール——書体2つ・サイズ4段・行間1.6〜2.0で決める

デザインを始めるとき、私が最初に固定するのは配色でもレイアウトでもなく、文字のルールです。使う書体は2つまで、サイズは4段、本文の行間は1.6〜2.0。この3つを先に決めておくと、以降の「この見出しは何pxにするか」がほぼ自動で決まり、ページが増えても見た目が崩れません。

ルールを最小にするのは、守れないルールは無いのと同じだからです。一人で制作して運用まで見ることが多い私の場合、複雑な規定を作っても半年後の自分が守りません。覚えられる量にしておくのが結局いちばん効きます。

書体は2つまで——役割で分ける

書体は「見出し用」と「本文用」の2つに絞ります。1つで通すのもよくやります。3つ目を足したくなったときは、たいてい書体が足りないのではなく、太さや大きさの差が足りていないだけでした。ウェイトを1段変える、サイズを1段上げる、字間を詰める。この3つで足りるかを先に試します。

日本語サイトでは、和文と欧文の見え方の差にも注意します。同じ指定でも、欧文書体は日本語より小さく見えることがあります。数字や英字が多いページでは、本文を1段上げるか、数字部分だけ別の書体を当てるかを、実際の文章を流し込んで比べて決めています。

Webフォントを使うなら、読み込む本数はそのまま表示速度に響きます。私は「本文1ファミリー・2ウェイト」を上限の目安にして、見出しだけ別書体を使いたい場合はサブセット化や font-display の指定とセットで検討します。

サイズは4段——本文を起点に上下へ

サイズは次の4段だけ用意します。

段	用途	目安
本文	記事や説明文	16〜18px
小	キャプション、補足、ラベル	本文の0.8〜0.875倍
中見出し	セクションの区切り	本文の1.25〜1.5倍
大見出し	ページタイトル、ヒーロー	本文の2倍前後

起点は本文です。多くのブラウザの既定の文字サイズは16pxなので、本文をそこから下げるときは慎重になります。倍率は等比で揃えると全体がまとまりやすく、たとえば1.25倍ずつなら16px / 20px / 25px / 31px という並びになります。このやり方は一般に「モジュラースケール」と呼ばれます。

段を4つに限るのは、迷いを減らすためです。「ここだけ19px」が始まると、あとから全体を直せなくなります。どうしても中間が欲しくなったら、サイズではなく太さ・色・余白で差をつけられないかを先に考えます。

なお、ユーザーがブラウザ側で文字を拡大できることも前提に置いておきます。WCAG 2.2 の Success Criterion 1.4.4 Resize text は、キャプションと文字画像を除き、支援技術なしで200%まで拡大しても内容や機能が失われないことを求めています。固定の高さでテキストを囲むと、拡大時にはみ出して切れることがあるので、私はコンポーネント単位でブラウザの拡大表示を一度試すようにしています。

行間は1.6〜2.0——日本語は広めに置く

本文の行間（CSSの line-height）は1.6〜2.0を出発点にしています。根拠の一つは、WCAG 2.2 の Success Criterion 1.4.12 Text Spacing です。ここでは、行の高さを文字サイズの1.5倍、段落の間隔を2倍、字間を0.12倍、語間を0.16倍に設定しても、内容や機能が失われないことが求められています。つまり1.5倍は「そこまで広げても壊れないこと」を確かめる基準であって、デザインの推奨値ではありません。ただ、日本語は漢字とかなが詰まって見えるぶん、私の体感でも1.5では窮屈で、1.7前後に置くと読みやすくなることが多いです。

行の長さとセットで考えるのも大事です。1行が長いページほど、次の行の頭に目を戻しにくくなるので、行間を広めに取ります。私は本文の1行を全角40字前後までに抑え、それより長くなるときは行間を上げるか、max-width で折り返します。

指定の仕方にも一つ注意点があります。line-height は単位なしの数値で書くのが無難です。MDNの line-height では、単位なしの値が継承の際に予期しない結果を避けられるため推奨されると説明されています。1.7em のように単位を付けると、親要素の文字サイズで計算された値がそのまま子に渡り、見出しの行間が詰まりすぎることがあります。

明日から試せる一手

担当しているサイトのCSSを開いて、font-size の指定がいくつあるか数えてみてください。5つ以上出てきたら、それぞれを「本文・小・中見出し・大見出し」のどれに寄せられるか、1つずつ割り当てていく。全部は寄せきれなくても、どこが例外として増えたのかが見えます。あわせて本文の line-height を確認し、単位付きで書かれていたら単位なしの数値に置き換えて、見出しの行間が変わらないかを見ておくと安心です。