ディスプレイ書体の選び方:本当にフィットする見出しフォントを選ぶ

ディスプレイ書体は最も声の大きい選択だ

ディスプレイ書体は、見出しサイズのあらゆる場面でブランドの人格を決める。そして、ほかのタイポグラフィの判断の多くはそれに従って決まる。読者が最初に認識するもので、システム全体のすべての見出し、ヒーロー、プルアウトに色を付けるトーンそのものだ。正しく選べば何年も働き続ける。間違えれば、2年目にクリエイティブディレクターが気づき、二度と見なかったことにはできないものになる。

多くのデザイナーは雰囲気で選ぶ。ファウンドリのカタログをスクロールし、ムードボード上の96ピクセルで良さそうに見えるものを見つけて、そのまま出荷する。システムが拡張するまで、ブランドが成熟するまで、書体が32ピクセルでプロダクトのコピーを担うまでは、それでうまくいく。雰囲気頼みの方法は持ちこたえない。雰囲気だけで選ぶデザイナーこそ、書体がプロダクトに合わなくなった18か月後に、リフレッシュで予算を燃やすことになる。

ディスプレイとテキスト、本当の違い

ディスプレイ書体は大きく組むことを前提に設計されていて、コントラストやディテール、個性が活きる。テキスト書体は小さなサイズで消えるように設計されていて、個性を犠牲にして、長い読書距離での可読性を取っている。

この設計上の違いは現実のもので、測定もできる。ディスプレイ書体は太い線と細い線のコントラストが高く、光学的なディテールがより際立ち、終端や曲線もより表情豊かだ。ディスプレイ書体を12ピクセルで組めば、そのディテールはノイズになる。テキスト書体を96ピクセルで組めば、機会を逃したように見える。

オプティカルサイズのバリエーションでこの溝を埋めるモダンなファミリーもあるが、根本の真実は変わらない。ディスプレイ書体は存在感のために作られ、テキスト書体は持久力のために作られている。一方を他方のように使うのは、制作現場で最もよくあり、最も目立つタイポグラフィの間違いのひとつだ。技術面をさらに掘り下げたいなら、variable fonts in production がバリアブル軸の文脈でのオプティカルサイジングを扱っている。

---

4つの選定質問

ボイス、レジスター、サイズ範囲、寿命。候補のディスプレイ書体をこの4つに通せば、悪い選択はすぐにふるい落とされる。これは好みのテストではない。診断であり、各質問が、その書体が実際に置かれる条件に合わない候補を排除していく。

4つの質問は順番に機能する。ボイスは通ってもロンジェビティで落ちる書体もある。4つすべてを通ってもサイズ範囲で崩れる書体もある。このフレームワークが探しているのは、最も美しい書体ではない。実際のシステムを生き延びる書体だ。

質問1:ボイスは何か

ボイスの質問とは、ブランドが温かいのか、技術的なのか、エディトリアルなのか、表現的なのか、控えめなのかを問うことで、書体も同じ座標に着地しなければならない。書体は何かを語る前からコミュニケーションしている。字形、線の太さ、終端など、そのすべてが、読者が最初の単語に目を置く時点ですでに語りかけている。

柔らかなオプティカルを持つヒューマニストサンスは、温かさ、親しみやすさ、人の手によるものを伝える。詰めたスペーシングのジオメトリック・グロテスクは、精密さ、システム、スケールを伝える。コントラストの高いモダンなセリフは、権威、知性、クラフトを伝える。これはタイポグラファが作ったルールではない。読者が何十年ものデザイン文脈から吸収してきたパターンであり、ボイスのずれたディスプレイ書体は、多くのクライアントが言葉にはできなくても即座に感じ取るレベルで、ブランドへの信頼を壊す。

質問2:レジスターは何か

レジスターとは、ブランドがどこまで声を大きくしてよいかということだ。プレミアムな金融プロダクトが音楽アプリと同じディスプレイのウェイトを使うことはできない。そしてレジスターはボイスとは別物で、ブランドは温かくて静かなこともあれば、技術的でうるさいこともある。

ディスプレイ書体には音量のスペクトラムがある。目立たない権威(静かなモダンセリフ)から、見逃しようのない主張(スワッシュ、ステンシルカット、極端なプロポーションを持つエクスプレッシブ・ディスプレイ)までだ。正しいレジスターの質問は「何を言いたいか」ではなく、「どれだけ大きな声で言うことを許されているか」である。B2BやSaaSのブランドの多くは、中程度に静かから中程度に大きいあたりに置くべきだ。プレミアムブランドは、ほぼ例外なく、デザイナーが当初望むより静かな方向へ行く。

---

質問3:サイズ範囲は何か

96ピクセルで歌う書体が32ピクセルで崩れることがあり、サイズ範囲によって、オプティカルサイズ軸が必要か、2つの別々の書体が必要かが決まる。これは制作上の制約であって、美的な好みではない。

ディスプレイ書体が80ピクセル以上のヒーロー見出しだけを担うなら、強いディスプレイ書体ならほとんどどれでも持ちこたえる。セクション見出しやサブ見出し、カードタイトルとして32〜40ピクセルまで下がった時点で、選定基準が変わる。オプティカルサイズの範囲を持つディスプレイ書体を探すか、中間ゾーンを担う2つ目の書体を計画しておこう。オプティカルサイズ軸なしでコントラストの高いモダンセリフを28ピクセルで使うのは、バグ報告を待つだけの可読性の問題だ。

質問4:寿命はどれくらいか

ディスプレイ書体は年を取らなければならず、流行のディテールは誰も口にしないリフレッシュ負債を抱えている。極端に引き伸ばした書体、極端に圧縮した書体、極端にステンシル化した書体は、18か月は面白いが、その後は前回のリブランドの恥ずかしいロゴになる。

寿命の質問は「この書体は時代を超えるか」ではない。時代を超えるものなどないからだ。問うべきは「この書体の最も特徴的なディテールの半減期はどれくらいか」である。極端な水平圧縮を持つ書体は、別のデザインの潮流が来た瞬間に古く見える。バランスの取れたプロポーションと控えめな個性を持つグロテスクは、特定の年の特定の月にデザインされたように見えることなく、10年もつ。流行のディスプレイ書体は、起こるのを待っているリフレッシュであり、多くのブランドには次の一回を払う余裕はまだない。

---

7つのディスプレイカテゴリー

ジオメトリック・グロテスク、ヒューマニストサンス、モダンセリフ、トランジショナルセリフ、ディスプレイスクリプト、エクスプレッシブ・ディスプレイ、モノスペース・ディスプレイ。現代のブランドワークの大半はこの7つのどれかに収まり、候補がどのカテゴリーに属するかが分かれば、一語も組まないうちに、それが何に最適化されているかが分かる。

ジオメトリック・グロテスク、現代のデフォルト

Inter Display、Söhne、GT Americaのようなジオメトリック・グロテスクは、テックやプロダクトブランドのデフォルトであり、自らを時代に結びつけることを拒むため、年の取り方も良い。バランスの取れたプロポーションとニュートラルな構造は、特定のデザインの潮流を宣言することなく、有能に見える。

リスクは冷たさだ。慎重なペアリング、サイズ設定、ウェイト選びのないジオメトリック・グロテスクは、シリコンバレー風の没個性なテキストの山になる。許容度は高いが、それ自体は面白くない。書体が引き受けない感情的な仕事は、周囲のシステムがやらなければならない。

モダンセリフが戻ってきた

Tiempos、GT Sectra、Lyon Displayのようなモダンセリフは、エディトリアルブランドやプレミアムなプロダクトのポジショニングを支えていて、見た目以上に賢く見える。コントラストの高い線は、多くのプロダクトデザインのグロテスク偏重のベースラインから、すぐに差別化される。

リスクは脆さだ。コントラストの高いセリフは慎重なオプティカルサイズ管理を必要とし、32ピクセル未満では急速に崩れる。レジスターにも含意がある。モダンセリフは本質的に格調が高く、プロダクトがそのレジスターを支えられなければ、書体は偽りの約束になる。このカテゴリーは、適切なブランドに合わせれば寿命が素晴らしいが、まだその資格を得ていないプロダクトに無理に当てはめるとコスプレに見える。ブランドが長続きするタイポグラフィのアイデンティティをどう築くかについては、ブランドアイデンティティの事例を参照してほしい。

---

エクスプレッシブ・ディスプレイは短期使用向け

エクスプレッシブ・ディスプレイ書体は最も楽しく、最も危険で、システムのほかの部分が静かなときにだけ居場所を得る。個性は最大、柔軟性は最小だ。

間違いは、エクスプレッシブ・ディスプレイをシステムの主要フォントとして扱うことだ。そうではない。キャンペーン、プロダクトローンチ、見出しがひとつだけのヒーローセクションなど、特定の場面のための専用ツールである。エクスプレッシブ・ディスプレイがすべてに触れると、何ひとつ表現的に読めなくなる。コントラストこそが要点なのだ。エクスプレッシブな書体を選ぶなら、質問4の寿命が最も重要なフィルターになる。

---

初日からブランドに合い、5年目でも合い続けるディスプレイ書体がほしいですか? Brainyは方法を持ってディスプレイ書体を選び、マッチングテストを走らせ、元のブランドより年の取り方が良いペアリングを納品します。Brainyに依頼する。

---

本文書体とのペアリングルール

ディスプレイが本文を選ぶのであって、その逆ではない。ルールは3つ。役割のコントラスト、感触の一致、そして組みにおけるリズムの共有だ。

役割のコントラストとは、本文書体が個性でディスプレイ書体と競ってはいけないということだ。ディスプレイ書体が表現的なら、本文はニュートラルにする。ディスプレイ書体がモダンセリフなら、本文はシンプルで読みやすいグロテスクにする。主張の強い2つの書体が同じ注目を奪い合うのは、書体選びが未熟であることを示す最も明白なサインのひとつだ。

感触の一致とは、見た目が違っても、2つの書体が根底の感性を共有しているべきだということだ。ディスプレイにSöhne、本文にFreight Textという組み合わせがうまくいくのは、どちらも温かく、よく考えられたプロポーションを持つからだ。Inter Displayに装飾的なスクリプトを合わせれば、別々のブランドのスタイルシートが衝突しているように見える。

組みにおけるリズムの共有とは、2つの書体のx-heightとオプティカルサイズに互換性があり、絶え間なくリスケールしなくても、さまざまな文脈でテキストが快適に収まるということだ。これは、多くのデザイナーが制作でレイアウトが崩れるまで飛ばしてしまうルールである。

---

5分間のマッチングテスト

ディスプレイ書体に決める前に、このテストを走らせよう。ブランド名を組み、見出しを組み、プルクォートを組み、数字を組み、3つのサイズで組む。

**ブランド名の描画。**候補のディスプレイ書体でブランド名を64ピクセルで組む。ブランドの重みを保てているか。この会社のものに見えるか、それとも別の会社のものに見えるか。余計な文脈がなくても、個性が伝わるはずだ。

**見出しの描画。**ブランドのコンテンツから実際の見出しを選び、48ピクセルで組む。lorem ipsumではなく、本物の見出しで。意味を伴った実際の言葉を書体が担えないなら、テストはその場で破綻する。

**プルクォートの描画。**1文を32〜36ピクセルで組む。ディスプレイ書体が負荷を感じ始めるゾーンだ。コントラストが保たれ、個性が崩れなければ、制作を生き延びる。

**数字の描画。**価格、日付、統計値をその書体で組む。数字は、ほかのどの文字セットよりも早く書体の質を暴く。悪い数字は、使う価値のない書体を明らかにする。

**3つのサイズ。**同じ行を96、48、28ピクセルで描画する。ディテールのレベルが変わっても、書体はどのサイズでも同じ個性を伝えるべきだ。28ピクセルで個性が崩れるなら、オプティカルサイズのバリアントか別の書体が必要になる。

5つすべてを通れば、その書体はシステム全体を構築する価値がある。ひとつでも落ちれば、二重に支払わずに済む早い段階で、制作上の問題を見つけたことになる。このテストは5分で終わる。決める前に走らせよう。

---

年の取り方が良いディスプレイ書体を選んだ7つのブランド

Stripe Press、Linear、Apple、Vercel、Notion、Substack、Figmaは、それぞれ長持ちするディスプレイ書体を選んでおり、そのパターンは研究する価値がある。

Stripe Pressは、主要なディスプレイ書体にSöhneを使っている。うまくいく理由は、Söhneがエディトリアルブランドを殺す無機質な印象を避けられるほど温かく、かつStripeの権威のレジスターを担えるほど精密だからだ。このペアリングは5年経っても持ちこたえている。

Linearは、Inter Displayを詰めたトラッキングで使っている。ほぼデフォルトのジオメトリック・グロテスクの選択だが、実装の規律は非の打ちどころがない。Interは初日からこのレンジのために作られているので、小さなプロダクトUIのサイズでも書体が崩れることはない。

Appleは、オプティカルサイズの切り替えをシステムとして備えたSF Pro Displayを使っている。この書体は最良の意味で見えない。自らを主張せずに、Appleの精密さを伝える。管理された独自資産なので、寿命は実質無制限だ。

Vercelは、自社製のGeistに移行した。これは寿命を保証する唯一の戦略、つまり書体を所有することだ。Geistは、ありふれたジオメトリック・グロテスクの冷たさなしに技術的なレジスターを担い、ほかのブランドが自分のものだと主張することはできない。

Notionは、一部のヒーローやエディトリアルの文脈でLyon Displayを使っている。Lyonはコントラストの高いオールドスタイルの書体で、生産性ツールというカテゴリーのグロテスクのベースラインからすぐに差別化され、プロダクトがふさわしく備える知的なレジスターをNotionに与えている。

Substackは、パブリケーションのヘッダー全体で主要なディスプレイレイヤーとしてSöhneを使っている。この書体はエディトリアルな真剣さを示しつつ、システムが大きく柔軟に対応しなければならないニュースレター本文のサイズでも読みやすい。

Figmaは、ブランドとマーケティングの文脈でWhyteを使っている。Whyteはやや柔らかくしたグロテスク構造を持ち、親しみやすいプレミアムとして読める。これは、Figmaを純粋に技術的なツールではなく、コラボレーティブでプロフェッショナルなツールとするポジショニングに合っている。

---

そうしなかった3つのブランド

流行色の強いディスプレイ書体を選んで年の取り方が悪かったブランドもあり、それが引き起こしたリブランドは教訓となる話だ。

最もよくある失敗パターンは、極端に圧縮されたエクスプレッシブ・ディスプレイ書体を、その圧縮が最先端に見えたデザインの潮流のさなかに選んでしまうことだ。18か月後には、その圧縮はどこにでもあり、ブランドは参照される側ではなく追随者に見える。このパターンが引き起こすリブランドは、高くつき、混乱を招き、決める前に寿命の質問を走らせれば避けられる。

2つ目のパターンは、ディスプレイのレジスターとプロダクトのレジスターの不一致だ。ラグジュアリーを示すためにコントラストの高いモダンセリフを選んだコンシューマー向けウェルネスブランドは、プロダクト体験が守れないレジスターの約束をしている。書体はひとつのことを言い、UXは別のことを言い、ユーザーはどちらも信用しない。

3つ目のパターンは、キャンペーンのために選んだディスプレイ書体がブランドシステムに漏れ出すことだ。恒久的なブランド書体になるはずのなかった限定使用のエクスプレッシブな書体が、その区別を誰も明示的に文書化しなかったために、ブランドの書体になってしまう。問題が見えるころには、それはスタイルガイドにも、印刷物にも、十数個のデジタルテンプレートにも入り込んでいる。3つに共通するパターンはこうだ。寿命とレジスターの質問は飛ばされた。デザイナーがよく分かっていなかったからではなく、タイトなスケジュールと魅力的なムードボードのせいで、その時点ではスキップが妥当に思えたからである。

---

FAQ

ディスプレイ書体とは正確には何ですか?

ディスプレイ書体は、大きなサイズ、一般的には36ピクセル以上で組むことを前提に設計されており、コントラスト、個性、光学的なディテールが活きる。読書サイズで読みやすいように設計されたテキスト書体とは区別される。現代のブランドの多くは両方を使う。見出しやヒーローの場面にはディスプレイ書体、本文やUIテキストにはテキスト書体だ。

ディスプレイと本文に1つの書体を使えますか?

場合による。両方の役割を担えるほど広いオプティカルサイズの範囲を持つ書体もいくつかある。プロダクトデザインで最もよくある例はInterだ。しかし、ほとんどのディスプレイ書体は小サイズの可読性のために作られておらず、ほとんどのテキスト書体は大サイズの存在感のために作られていない。シンプルなプロダクトUIを超えるものなら、通常は2書体のシステムが正解だ。

ディスプレイ書体にはいくらかけるべきですか?

幅は、Inter Displayのようなオープンソースの書体のゼロ円から、SöhneやGT Americaのようなライセンス書体の、利用ティアに応じた年間数百ドルから数千ドルまで広がる。問題はコストではなくリターンだ。5年間ブランドに合う書体は高くない。18か月でリブランドを引き起こす書体は、ライセンス料よりはるかに高くつく。

Inter Displayは良いディスプレイ書体ですか?

Inter Displayは技術的に優れていて守備範囲も広いが、独自の連想を背負うデフォルトになっている。差別化が目的なら、実装が卓越していない限り、Inter Displayを選ぶ理由を正当化するのは難しい。信頼性とシステム全体のカバレッジが目的なら、これに勝るものは少ない。

ディスプレイ書体と本文書体のペアリングが正しいかどうか、どうすれば分かりますか?

まず感触の一致チェックをする。見た目が違っても、2つの書体は根底の感性を共有しているか。次に役割のコントラストチェックをする。一方が明確に個性の書体で、もう一方が明確に可読性の書体か。両方を実際のサイズで同じページに組んで読む。どちらがディスプレイ書体かを1秒以内に判別できるなら、ペアリングはうまく機能している。

ディスプレイ書体にオプティカルサイズのバリアントは必要ですか?

ディスプレイ書体を36ピクセル未満で使うなら、必要だ。コントラストの高いディスプレイ書体は、小さなサイズで、可読性とブランドの認識の両方に影響する形で崩れる。オプティカルサイズ軸を持つ書体を選ぶか(variable fonts in productionで詳しく扱っている)、小さいレンジ用に2つ目の書体を選ぼう。

ディスプレイ選定で最もよくある間違いは何ですか?

1つのサイズでの視覚的な印象だけで選ぶことだ。暗い背景の96ピクセルのムードボードで素晴らしく見える書体が、白い背景のプロダクトの文脈で32ピクセルになると、完全に崩れることがある。決める前に5分間のマッチングテストを走らせよう。5分で済み、高くつく間違いをすべて出荷前に捕まえてくれる。

---

ディスプレイ選定が本当に解き放つシフト

うまく選んだディスプレイ書体は利子を生むブランド資産であり、下手に選んだものは起こるのを待っているリフレッシュだ。

この記事のフレームワークはデザイン理論ではない。ローンチ後の書体をめぐる会話を防ぐディシジョンログだ。その会話とは、クリエイティブディレクターがディスプレイ書体が持ちこたえていないと気づき、チームがクライアントに、ピッチデッキでは正しく見えたフォントがなぜ制作では間違って見えるのかを説明しなければならない場面のことである。

良いディスプレイ選定とは、最も美しい書体を見つけることではない。ボイスに合い、レジスターを保ち、サイズ範囲を生き延び、恥ずかしくなく年を重ねる書体を見つけることだ。スケールしても通用するウェブデザインの原則は、すべて同じ論理を共有している。現実の制約を念頭に置いて下した判断は、ムードボードで下した判断より長持ちする。ソニックブランドアイデンティティも、別のメディアで同じ規律に従っている。残る選択とは、その瞬間だけでなく、システム全体を念頭に置いて下されたものだ。

4つの質問を走らせ、マッチングテストを走らせる。悪い選択は出荷前にふるい落とされ、良い選択は、それを選んだキャンペーンより長く生きるブランド資産になる。

初日から機能し、5年目でも機能するディスプレイ書体がブランドに必要なら、Brainyに依頼してください。私たちは方法を持ってディスプレイ書体を選び、マッチングテストを走らせ、元のブランドより年の取り方が良いペアリングを納品します。