タイポグラフィシステムデザイン：スケールする書体の構築方法

フォントを選ぶことは、タイポグラフィシステムをデザインすることではありません。見た目の良い2つのフォントを選ぶことも、やはりタイポグラフィシステムをデザインすることではありません。タイポグラフィシステムとは、製品、ブランド、またはインターフェース内のあらゆるテキストが、表示されるすべてのコンテキストでどのように振る舞うかを決定する一連のルールのことです。

ほとんどのデザイナーはこのステップを飛ばします。見出し用のフォントと本文用のフォントを選び、サイズを目測で決め、それで終わりにしてしまいます。しかし半年後には、マーケティングサイトではあるスケールが使われ、アプリでは別のスケールが、プレゼン資料ではさらに別のスケールが使われ、ロゴは変わっていないのにブランドに一貫性がないと感じる理由を誰も説明できません。

その一貫性のなさは、タイプシステムの問題です。そして、それは解決可能です。

タイポグラフィシステムが実際に含むもの

真のタイポグラフィシステムは、以下の5つの要素を定義します。

1. タイプスケール。 テキストサイズ間の数学的な関係。
2. フォントペアリング。 どの書体がどの役割を果たすか、そしてその理由。
3. ウェイトとスタイルのルール。 ボールド、イタリック、ミディアムをいつ使用するか、そして各ウェイトが何を意味するか。
4. スペーシングの基準。 すべてのサイズにおける行の高さ、文字間隔、段落間隔。
5. レスポンシブな挙動。 上記の各要素が画面サイズに応じてどのように適応するか。

もしあなたの「タイプシステム」にこれらのいずれかが欠けているなら、それはフォントの選択であって、システムではありません。

タイプスケールは基盤である

タイプスケールとは、一貫した数学的比率から生成されるフォントサイズのセットです。感覚でサイズを選ぶ（ここでは16px、そこでは24px、ヒーローセクションには36pxなど）のではなく、基準となるサイズと比率を選び、そこから他のすべてのサイズが派生します。

一般的に機能する比率：

| 比率 | 名称 | 感覚 | 最適な用途 | |---| | 1.125 | 長2度 | 引き締まった、密度の高い | データ量の多いダッシュボード、小型スクリーン | | 1.200 | 短3度 | バランスの取れた、落ち着いた | エディトリアル、ドキュメンテーション | | 1.250 | 長3度 | 明確な階層 | マーケティングサイト、ポートフォリオ | | 1.333 | 完全4度 | 強いコントラスト | ランディングページ、ヘッドライン | | 1.618 | 黄金比 | ドラマチックな | 印刷物、ポスターデザイン、ヒーローセクション |

16pxを基準（ブラウザのデフォルト、アクセシブルで読みやすい）として開始し、見出しには乗算、キャプションやラベルには除算してサイズを決めます。16pxからの長3度スケールでは、10px、12.8px、16px、20px、25px、31.25px、39pxが得られます。これをきれいな値に丸めれば、恣意的ではなく意図的な印象を与えるスケールが完成します。

フォントペアリングは戦略である

インターネット上には「最高のフォントペアリング」リストが溢れています。そのほとんどは、デザインアドバイスを装った装飾のアドバイスです。真のフォントペアリングは戦略的なものです。

実際に機能するルール：

構造にコントラストを、比率に調和を。 幾何学的なサンセリフ体とヒューマニストセリフ体を組み合わせます。構造的なコントラストが視覚的な面白さを生み出します。共通のxハイトと比率が、それらが一体感を持っているように見せます。Inter + Merriweather。DM Sans + Lora。Satoshi + Source Serif。

役割ごとに一つの声。 見出しの書体は個性を持ちます。本文の書体は内容を伝えます。UIの書体は機能を果たします。一つのフォントでこれらすべてをこなそうとすると、汎用的で無理のあるシステムになってしまいます。

2つのフォントでほとんどの場合十分です。 管理しやすいシステムであれば、3つが最大です。フォントを追加するごとに、ペアリング、ウェイト、レスポンシブに関する決定の数が倍増します。もし4つのフォントが必要だと考えるなら、おそらく2つのフォントをもっとうまく使う必要があるでしょう。

ペアリングは標本ではなく、文脈でテストする。 タイプ標本のポスターで美しく見えるペアリングでも、カードコンポーネントやナビゲーションバーの中では崩れてしまうことがあります。決定する前に、実際のレイアウトでテストしてください。

ウェイトとスタイルのルール

ウェイトは階層です。ボールドは重要、ミディアムは補足、レギュラーは本文、ライトは装飾的または二次的を意味します。これらの関連性は、人々の読解方法に深く根付いています。

誤りは、ウェイトを一貫性なく使用することです。マーケティングサイトではH2がセミボールドなのに、アプリではボールドだと、フォントが同じでもブランドの印象は異なってしまいます。タイプシステムはこれを固定します。

• H1: ボールド (700)。常に。これは最も目立つ声です。
• H2: セミボールド (600) またはボールド (700)。どちらかを選び、どこでもそれを使用します。
• H3: ミディアム (500)。H2と競合することなく認識されるのに十分なコントラスト。
• 本文: レギュラー (400)。読みやすく、ニュートラルで、摩擦がありません。
• キャプションとラベル: 小さいサイズではレギュラー (400) またはミディアム (500)。

イタリック体には一つの役割があります。それは本文中の強調です。イタリック体を装飾目的（引用文、セクションラベルなど）で使用すると、その意味が薄まり、本来の強調が見えなくなってしまいます。

スペーシングはシステムが破綻する場所

行の高さ、文字間隔、段落間隔は、ほとんどの「タイプシステム」が静かに崩壊する場所です。製品間でフォントサイズは一致し、ウェイトも一致しているのに、スペーシングが一貫していないためにテキストの印象が異なってしまうのです。

行の高さのルール：

見出しは、大きなテキストが本文テキストの比率で垂直方向のスペースを過剰に作り出すため、より狭い行の高さ（1.1から1.3）が必要です。本文テキストは、快適な読書のために、より広い行の高さ（1.5から1.8）が必要です。よくある間違いは、すべてに1.5を適用することです。これにより、見出しが浮いて見え、本文テキストが不適切なサイズで窮屈に感じられます。

文字間隔のルール：

大きなテキスト（見出し、ディスプレイ）は、わずかに負の文字間隔（-0.01emから-0.02em）の恩恵を受けます。大きなサイズでの視覚的な間隔は、意図よりも広く感じる隙間を作り出します。小さなテキスト（キャプション、ラベル、大文字）は、わずかに正の文字間隔（+0.02emから+0.05em）の恩恵を受けます。これは、小さなサイズでのタイトなトラッキングが可読性を低下させるためです。

段落間隔：

基本単位の一貫した倍数を使用します。基本が16pxで4pxグリッドを使用している場合、段落間隔は任意の値ではなく、16pxまたは24pxであるべきです。これにより、すべてのページで垂直方向のリズムが一貫して保たれます。

レスポンシブな挙動

一つのブレークポイントで機能するタイプシステムは、システムではありません。それはスクリーンショットに過ぎません。

フルードタイポグラフィ は、CSSのclamp()を使用して、ブレークポイント間でフォントサイズをスムーズにスケーリングします。ブレークポイントで16pxから14pxに急に切り替わるのではなく、サイズが補間されます。これにより、厳密なブレークポイントの変更によって生じるレイアウトのぎこちなさが解消されます。

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

モバイルでのスケール圧縮。 デスクトップのスケール比率（例えば1.250）は、小さな画面ではコントラストが強すぎます。デスクトップでは39pxのH1は機能しますが、375pxのスマートフォンでは39pxのH1は機能しません。解決策は、モバイルで比率を圧縮する（1.125または1.150に下げる）一方で、ベースサイズは同じに保つことです。階層は維持され、サイズが適応します。

最小可読サイズ。 モバイルの本文テキストでは16pxを下回らないでください。いかなるテキストでも12pxを下回らないでください。アクセシビリティはオプションではなく、小さな画面での小さなテキストは実際のユーザーにとって機能しません。

よくあるタイプシステムの失敗

フォントのビュッフェ。 5つの書体があり、根拠がない。すべてのページが異なるブランドのように感じられます。

孤立したウェイト。 Thin (100) や Black (900) を一つの装飾要素にのみ使用し、他には使わない。これはシステム価値を追加することなく、視覚的なノイズを増やします。

スペーシングの推測。 誰もルールを定義していないため、コンポーネント間で変化する行の高さと文字間隔。

デスクトップ専用スケール。 1440pxのモックアップでは見栄えが良い。しかし、レスポンシブな挙動を誰もテストしていないため、それより小さいものすべてで崩壊します。

欠落したトークン。 Figmaファイルで定義されているが、デザイントークンやCSSカスタムプロパティに変換されていないタイプシステム。システムは理論上は存在するがコードには存在しないため、エンジニアはスプリントごとにそれを再発明します。

よくある質問

デザインにおけるタイポグラフィシステムとは何ですか？

タイポグラフィシステムとは、ブランドや製品全体におけるフォントの選択、サイズ、ウェイト、スペーシング、レスポンシブな挙動を管理するルールの完全なセットです。これはフォントを選ぶだけでなく、あらゆるテキストがどのようにスケールし、一貫性を保つかを定義するものです。

デザインシステムにはいくつのフォントが必要ですか？

2つが標準です。ほとんどのシステムでは3つが最大です。1つのディスプレイまたは見出し用書体と1つの本文用書体で、デザインの大部分のニーズに対応できます。これ以上追加すると、ペアリング、ウェイト、レスポンシブに関する決定において指数関数的な複雑さが増します。

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

単一の最適な比率というものはありません。長3度 (1.250) はマーケティングやエディトリアルに適しています。短3度 (1.200) は密度の高いインターフェースに合います。完全4度 (1.333) は強い見出しのコントラストを生み出します。コンテンツの密度と階層のニーズに合った比率を選択してください。

フォントを選ぶ前にシステムを構築する

フォントは最初の決定ではなく、最後の決定です。スケール、スペーシングのルール、ウェイトの階層、レスポンシブな挙動を定義してください。そして、それらの制約に合う書体を選びます。優れたシステムの中にある平凡なフォントは、システムのない優れたフォントを常に凌駕するでしょう。