WebアプリのタイポグラフィガイドUX：フォント選定・スケール・行間設定まで
WebアプリのUIタイポグラフィを解説。フォントの選び方・タイプスケール設計・行間・文字間隔・日本語フォント対応など、読みやすく美しいUIテキストを実現するためのタイポグラフィガイドを紹介します。
タイポグラフィはUIデザインにおいて最も多くの画面スペースを占める要素でありながら、見落とされがちな設計領域です。フォントの選択・サイズスケール・行間・字間の設計が、UIの読みやすさ・印象・情報伝達効率に直接影響します。本記事では、WebアプリUIのためのタイポグラフィ設計の基礎から実践まで解説します。
フォント選定の基準
可読性（Legibility）と読みやすさ（Readability）：
可読性は個々の文字を識別できるかどうか、読みやすさは文章全体を快適に読めるかどうかです。UIでは両方が重要ですが、特に長文コンテンツでは読みやすさが最優先されます。
ジオメトリックサンセリフ vs ヒューマニストサンセリフ：
ジオメトリック（Futura・Circular系）は幾何学的で洗練された印象ですが、小サイズでの可読性が低下しやすいです。ヒューマニスト（Inter・Source Sans系）は人間的な温かみと高い可読性を両立しており、UIテキストに広く使用されています。
Interフォントの採用理由：
Google FontsのInterは現在のWebアプリUIで最も広く使われているフォントの1つです。UI向けに設計されており、様々なサイズでの可読性・数字・記号の視認性に優れています。
日本語フォントの選択：
日本語WebアプリではNoto Sans JP・Hiragino Sans（macOS/iOS）・Meiryo（Windows）が標準的な選択肢です。游ゴシック・BIZ UDPゴシックも読みやすさに優れています。Google Fonts経由でNoto Sans JPを配信する場合、サブセット化（使用する文字のみを含める）によりファイルサイズを最小化することが重要です。
タイプスケール（フォントサイズの体系）の設計
モジュラースケールの採用：
1つの基準サイズから一定の比率でサイズを拡大するモジュラースケールを使うと、一貫したサイズ体系が生まれます。比率1.25（Major Third）または1.333（Perfect Fourth）がUIに使いやすい比率です。
実践的なUIタイプスケール例（基準16px）：
- xs: 12px（補足・キャプション・バッジ）
- sm: 14px（セカンダリテキスト・ラベル）
- base: 16px（本文・基準サイズ）
- lg: 18px（大きめの本文・サブタイトル）
- xl: 20px（セクション見出し）
- 2xl: 24px（ページ見出し）
- 3xl: 30px（大見出し）
- 4xl: 36px（ヒーロー・ディスプレイ）
最小フォントサイズ：
本文テキストの最小推奨サイズは16px（スマートフォンではiOSが自動ズームを発生させない最小値も16px）です。12px以下のテキストはアクセシビリティの観点から避けるべきです。
行間（Line Height）の設定
行間の役割：
行間は文章の読みやすさに直結します。行間が狭すぎると行の識別が難しくなり、広すぎると読む目線が迷子になります。
推奨値：
- 見出し（短いテキスト）: 1.2〜1.3
- 本文テキスト: 1.5〜1.7
- 小テキスト（12〜14px）: 1.4〜1.6
- 日本語テキスト: 欧文より広めに設定。本文は1.7〜1.9が読みやすい
日本語の行間の考え方：
日本語は漢字・ひらがな・カタカナが混在し、文字のバウンディングボックスが欧文より大きいため、同じline-heightでも視覚的な行間は欧文と異なります。日本語UIでは欧文より0.1〜0.2程度大きめのline-heightを設定することを推奨します。
字間（Letter Spacing）の設定
見出しの字間：
大きなフォントサイズほど字間を少し詰める（-0.02〜-0.05em）と、文字のまとまりが良くなります。
本文の字間：
本文は原則として字間を変更しないか、わずかに広める（0.01〜0.02em）程度に留めます。
日本語の字間：
日本語テキストは均等な字間が読みやすさの基本ですが、見出しでは0.05〜0.1em程度広めに設定することで、洗練された印象を与えることができます。
フォントウェイト（太さ）の使い方
ウェイトによる視覚階層：
- Regular (400): 本文・説明文
- Medium (500): ラベル・小見出し・強調
- Semibold (600): ボタン・セクション見出し
- Bold (700): ページタイトル・重要な数値
可変フォント（Variable Font）の活用：
Variable Fontは1つのファイルで複数のウェイト・スタイルを提供でき、ファイルサイズを削減しながら細かいウェイト調整が可能です。GoogleフォントのInterはVariable Fontとして提供されています。
まとめ
タイポグラフィはUIの「読む体験」を設計する作業です。フォント選定・タイプスケール・行間・字間・ウェイトを体系的に設計することで、情報が読みやすく伝わりやすいUIが実現します。日本語テキストには日本語最適化の設定が必要である点に注意し、ターゲットデバイスでの表示確認を怠らないようにしましょう。UI ZUKANでは実際のUIのタイポグラフィ事例も多数掲載しています。