タイポグラフィの階層構造:本当に「読める」ものを作る方法

タイポグラフィの階層構造を扱う記事の大半は、作り方ではなく説明をしています。見出しは重要そうに、本文は落ち着いて見えるべき、と。でも「ホームページ、記事、設定パネルのすべてで通用するサイズ5つ、ウェイト3つ、行間を決めてくれ」と頼まれたら、何の役にも立ちません。説明はシステムではありません。出荷されるものがシステムです。

この記事は「構築編」です。実際の比率、実際の数値、判断の順番、そしてローンチ前に大半の階層を壊す失敗パターンを扱います。

タイポグラフィの階層構造とは何か

タイポグラフィの階層構造とは、あらゆるテキスト要素に構造的な順位を付け、目が何かを読む前に、何を1番目、2番目、3番目に読むべきかを伝えることです。 これはビジュアルヒエラルキーのうち書体に特化したレイヤーであり、機能するタイポグラフィシステムの背骨です。

本物の階層は、4つの問いに文書で答えています。レベルはいくつか。各レベルのサイズは。各レベルのウェイトは。レベルの間と内側にどんなスペースがあるか。これらの答えが1ページのドキュメントにまとまっていないなら、そのシステムは設計されたものではなく、場当たり的なものです。

ほぼすべてのシステムに必要な5つのレベル

機能するシステムの多くは5レベルに落ち着きます。H1、H2、H3、本文、スモールです。それ以上はノイズになり、それ以下ではページが平坦になります。

罠は、ボタン、キャプション、フォームラベルを別レベルとして扱うことです。これらは役割が違うだけの本文かスモールです。ボタンはミディアムウェイトの本文。キャプションはレギュラーウェイトのスモール。ラベルはミディアムウェイトのスモール。サイズは同じで、仕事が違うだけです。

スケール比を選び、貫く

すべてのレベルのサイズは、ベースに1つの比率を適用して決まります。先に比率を選び、そこからすべてのサイズを導き出します。ベースはほぼ常に16px。ブラウザのデフォルトであり、画面上で本文が最もきれいに読めるサイズです。ほぼすべてのプロジェクトは、次の3つの比率でカバーできます。

メジャーサード(1.25)。 詰まっていて密度が高い。データ量の多いUIや管理ツール向き。16pxベースなら 16、20、25、31、39、49、61。目に見えるけれど、決して劇的にはなりません。

パーフェクトフォース(1.333)。 働き者です。エディトリアルに十分な強さがあり、プロダクトに使える控えめさもあります。16pxベースなら 16、21、28、37、50、67。ほとんどのマーケティングサイトの標準です。

黄金比(1.618)。 エディトリアルで表現力があり、ほとんど芝居がかっています。ランディングページや雑誌レイアウト向き。16pxベースなら 16、26、42、68、110。H1が本文を見下ろしてそびえ立ちます。それが狙いです。

type-scale.com のようなツールを使えば、任意のベースと比率の表が一瞬で生成されます。1つ選び、数値を書き留めて、出荷する。プロジェクトの途中で切り替えるのは、全ページに手が入るリファクタです。

ウェイトは第2の軸であって、第1ではない

デザイナーはサイズだけをレバーだと考え、なぜページが平坦に見えるのか首をかしげます。ウェイトは仕事の半分を担います。特にサイズの幅が限られるモバイルでは。

機能するシステムにはウェイトが3つ必要です。本文にレギュラー、強調とラベルにミディアム、見出しにボールドまたはセミボールド。4つ目のウェイトはブランドの判断であって、システムの要件ではありません。

平坦なページの大半を直すルールがあります。隣り合う2つのレベルに同じウェイトを使わないこと。H2がボールドなら、H3はセミボールドかミディアムにします。同じウェイトが隣り合うと、サイズに関係なく階層は崩れます。逆の罠は「全部ボールド」で、ウェイトというレバーを丸ごと消してしまいます。

行間は静かな階層レバー

行間(リーディング)とは、ベースラインからベースラインまでの行同士の縦の距離です。CSSではline-heightと呼びます。タイポグラフィの階層構造で最も過小評価されているレバーです。

見出しの詰めた行間は、自信があり密度の高い印象を与えます。本文のゆったりした行間は、落ち着いて読みやすい印象を与えます。逆にすると階層がひっくり返ります。行間1.2の本文は壁に見えます。行間1.6の64px見出しは装飾に見えます。

実用的なデフォルト。見出し(H1、H2):1.1〜1.2。小見出し(H3):1.2〜1.3。本文:1.5〜1.7。キャプション:1.4〜1.5。大きい文字ほど行間は少なく、小さい文字ほど多く。長文はUIより本文の行間を広く取ります。行間1.4のダッシュボードは密に見えますが、それで正解です。

トラッキングはディスプレイ用で、本文には使わない

カーニングは、ロゴや見出しの規模で調整される、特定の文字ペア間のスペースです。トラッキングは、ひと続きのすべての文字にわたって均一に設定されるスペースです。この2つは別のレバーです。

トラッキングが階層ツールになるのは両極端でだけです。大きな見出しの詰めたトラッキング(-0.02em〜-0.04em)は、決まっていて断定的な印象を与えます。小さな大文字ラベルの広げたトラッキング(+0.05em〜+0.1em)は、ラベルを意図的に見せます。どちらも書体の役割を伝えます。

危険地帯は本文です。本文のトラッキングは、階層面の利点を何も得られないまま可読性を損ないます。本文はゼロのままにしてください。トラッキングを理解していないデザイナーを見抜く最速の目印は、「エディトリアルっぽいから」と+0.1emに設定されたヒーロー見出しです。エディトリアルには見えません。装飾に見えます。

レベル間のスペースも階層の一部

各レベルの周囲の縦スペースは、サイズやウェイトと同じくらい順位を決めます。上に80px、下に24pxあるH2は、新しいセクションの始まりに見えます。上下24pxのH2は、段落の区切りに見えます。

ルールは、上のスペースを下の約2倍にすること。要素は下に続くコンテンツに属します。出発点のスペック:H2の上は64〜96px、H2の下は16〜24px。H3の上は32〜48px、H3の下は8〜16px。ホワイトスペースの規律は、書体そのものと同じくらい重要です。完璧なスケールでもスペースが雑なら平坦に見えます。

階層をゼロから作る判断の順番

手順を飛ばすと、単体では良く見えても、実際のプロダクトの中で崩れます。

1. ベースサイズを選ぶ。 画面なら16px。エディトリアル中心のサイトなら18px。本文は16px未満にしない。
2. スケール比を選ぶ。 密なUIならメジャーサード、汎用ならパーフェクトフォース、エディトリアルなら黄金比。
3. サイズ表を生成する。 すべてのレベルを比率から導く。ピクセルは整数に丸める。書き留める。
4. ウェイトを3つ選ぶ。 レギュラー、ミディアム、ボールドまたはセミボールド。それ以上は不要。
5. レベルごとに行間を決める。 見出しは詰め、本文は広く。
6. レベルごとにスペースを決める。 すべての見出しで上下2対1の比率。
7. トラッキングは両極端だけ設定する。 ディスプレイは詰め、小さな大文字は広げる。本文はゼロ。
8. 実際の3画面で検証する。 ホームページのヒーロー、長文記事、密なUIパネル。3つすべてで成立すれば出荷。

壊れた階層を出荷する最速の方法は、比率ではなく直感でサイズを決め、あとからページごとに行間とスペースを継ぎ当てすることです。

大半の階層が失敗する場所

他のどんな原因よりも多くの階層を壊す失敗パターンが6つあります。

全部ボールド。 ウェイトがレバーでなくなり、ページはサイズだけに頼ることになります。H3や3段目以降の見出しはミディアムかセミボールドに落としましょう。

レベルが2つしかない。 H1と本文だけで間が空っぽだと、上にタイトルが載っただけの平坦な文書に見えます。150〜300語ごとにH2を入れましょう。

宙に浮く小見出し。 上下のスペースが等しいと、小見出しはどちらのセクションにも属しません。下のスペースを詰めて、続く本文にくっつけましょう。

暴走するH1。 デスクトップのヒーロー用H1を、すべてのコンテンツページにそのまま使うとリズムが崩れます。デスクトップH1のトークンとコンテンツページH1のトークンを用意しましょう。名前は同じで、値は2つ。

14pxの本文。 16px未満は可読性を壊し、小さいレベルを2pxの幅に押し込めます。最低16px。13〜14pxはキャプションとラベルだけに使います。

デスクトップでしか設計していない階層。 モバイルはすべてのレベルを圧縮し、階層をにじんだ染みに変えます。モバイルファーストで設計し、広げていきましょう。

2026年の条件での階層構造

可変フォントは今やあるべきデフォルトです。80KBほどの1ファイルで、1つの軸からレギュラー、ミディアム、セミボールド、ボールドを提供します。可変フォント2つでシステム全体をまかなえます。選び方はフォントペアリングガイドで解説しています。

AI概要は、見た目ではなくセマンティックなマークアップを読みます。H1の次に、H2風にスタイルしたdiv、その次にH3、というページは誤って解析されます。ビジュアルヒエラルキーとセマンティックHTMLは一致していなければなりません。H1は1ページに1つ、レベルの飛ばしはなし。セマンティック面はウェブデザインの原則の解説で扱っています。

階層監査チェックリスト

保存してください。ローンチ前に実行し、1つでもNoがあれば出荷前に直します。

10点満点なら、どのデバイスでも自ずと読めます。7点なら、デザインされたものとして読めます。7点未満は、書体が何であれ平坦に読めます。

FAQ

ビジュアルヒエラルキーとタイポグラフィの階層構造の違いは何ですか?

ビジュアルヒエラルキーは、サイズ、ウェイト、色、位置、スペース、整列、画像を使ってあらゆる要素に順位を付ける、より広いシステムです。タイポグラフィの階層構造は、サイズ、ウェイト、行間、トラッキング、スペースを使ってテキストに順位を付ける、書体に特化したレイヤーです。タイポグラフィの階層構造は、ビジュアルヒエラルキーへの入力の1つです。

タイプスケールに最適な比率は何ですか?

パーフェクトフォース(1.333)が最も安全なデフォルトです。芝居がかることなく、はっきりしたコントラストが生まれます。密なUIや管理ツールにはメジャーサード(1.25)を。ヒーローが主役にならなければならないエディトリアルやランディングページには黄金比(1.618)を使いましょう。

平坦に見える階層はどう直せばいいですか?

順番に3つの手を打ちます。まずサイズのコントラストを上げる。H1はH2の2倍以上、H2は本文の1.5倍以上。次にウェイトのコントラストを足す。隣り合う2つのレベルが同じウェイトにならないようにする。最後に、すべての見出しで上下2対1の比率を使ってスペースのリズムを締める。それでもページが平坦なら、レイアウトが背負いすぎています。タイポグラフィの作業を増やす前に、スコープを削る必要があります。

階層を作り、そして信頼する

機能する階層は、自ずと読めるページへの最も安い近道です。読者にはレベルも、比率も、行間の値も見えません。見えるのは、筋の通ったページです。計算は明快さの中に消えていきます。

罠は、階層を最終工程の仕上げとして扱うことです。階層は背骨です。最初に作り、実際の画面で検証し、トークンとして文書化して、他のあらゆる判断をそれに合わせて組み立てましょう。タイプシステム、階層、プロダクトUIを3つの別プロジェクトではなく1つのプロジェクトとして作るチームが欲しいなら、Brainyに依頼してください。比率を選び、トークンを書き、実際のプロダクトでシステムを出荷します。