画面上の情報の90%以上は「文字」です。 タイポグラフィが破綻しているUI（小さすぎる文字、窮屈な行間、メリハリのないサイズ展開）は、ユーザーに「読む努力」を強要します。ユーザーは文字をじっくり読みたいわけではなく、目的を素早く達成したいだけです。 読むのに疲れるUIは、無意識のうちにユーザーの認知負荷を高め、直帰率の増加やコンバージョンの低下に直結します。
1. 原則の定義
文字のサイズ、ウェイト（太さ）、行間（line-height）、文字間（letter-spacing）を体系的に定義し、可読性と視覚的な構造を作り出す設計。
本質は「文字をデザインの装飾として扱うのではなく、情報伝達のインターフェースとして最適化すること」です。美しいフォントを選ぶこと以上に、システム全体で一貫した「文字のルール（タイポグラフィスケール）」を作り上げることが重要です。
2. いつ使うか（適用場面）
特に重要になるケース
- テキスト量の多い画面: ニュースアプリ、ブログ記事、利用規約、長文のフォームなど。
- ダッシュボード: 数値やラベルが密集する画面での、情報の優先順位づけ。
- デザインシステムの構築時: チーム全員が迷わず使えるフォントスタイルの定義（H1, H2, Body, Captionなど）。
トレードオフが起きる場面
- 情報密度 vs 可読性: 文字を大きくし行間を広く取れば読みやすくなりますが、1画面に入る情報量は減ります。一覧性を重視する業務システムと、没入感を重視するメディアサイトでは、最適なタイポグラフィの設定が異なります。
3. なぜ重要か（設計判断の核）
タイポグラフィは「文字を美しく見せる」技術ではなく、「読者の視線を誘導する」構造である。
設計判断の基準
- 「すべて同じサイズの文字になっていないか？」→ YESなら、情報の階層（どれが重要か）が伝わりません。サイズと太さで明確な差をつける。
- 「直感（ピクセル単位）で文字サイズを決めていないか？」→ YESなら、スケール（比率）に基づいたルールに従うべきです。
優先順位の考え方
- 可読性（Readability）: 本文（Bodyテキスト）がストレスなく読めるかどうかが最優先。スマホなら16px前後、適切な行間（1.5〜1.7倍）を確保する。
- 階層化（Hierarchy）: 見出しと本文の違いが一目でわかるか。
- ブランド表現: 上記2つを満たした上で、フォントファミリー（書体）によるブランドの演出を行う。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
ここをクリアしていないと、製品として「読みにくい」「疲れる」と判断されます。
理想ライン（Better - できると強い/プロの品質）
UXをさらに高め、洗練されたプロのUIにするための基準です。
5. UI例
文字のサイズ、太さ、行間をルール化するだけで、「ただ書かれただけの文字」が「構造化された情報」に変わります。
改善プロセス
- 画面内のテキストを「役割（見出しH1〜H3、本文、注釈）」ごとに分類する。
- 「本文（Body）」の最適サイズ（例：16px）と行間（例：24px）を最初に決める。
- 本文を基準に、スケール（比率）を使って見出しのサイズを決定し、太さ（Weight）で明確なコントラストをつける。
6. 関連リンク
- 関連リファレンス（理論）: 視覚的階層, 認知負荷
- 用語集（定義）: 可読性・読読性・判読性
- 関連するUI原則（横）: 視覚的階層, コントラスト, 画像・アイコンの役割 (Iconography)
7. まとめ
今日から直せる一手
あなたのサイトの「長めの説明文」の CSS line-height を 1.6 以上に設定してみてください。それだけで息苦しさが消え、スッと読めるようになります。
チームに共有するなら一言 「文字は『書く』ものじゃない、『デザイン（設計）』するものだ。」
