Google Fonts フォント組み合わせ実践ガイド

優れたフォントの組み合わせとは、単に自分が好きなフォントを2つ並べることではありません。視線を惹きつける「見出し」と、邪魔をせず自然に読ませる「本文」の役割分担を明確に定義することにあります。失敗するタイポグラフィの多くは、2つのフォントが画面上で喧嘩してしまうことが原因です。同じ太さ、同じ主張、似たような骨格が並ぶと、画面が散らかり、読者はどこに集中すべきか迷ってしまいます。

機械的なランキングだけに頼るのではなく、意図を持った組み合わせを選びましょう。FontDashの フォント組み合わせスタジオ では、実際のテキストでリアルタイムに相性を確認できます。

明確なコントラストを意識的に作りましょう。例えば「セリフ体（明朝系）」と「サンセリフ体（ゴシック系）」の組み合わせや、「引き締まったコンデンス書体」と「ゆったりした本文書体」の対比です。同時に、x-ハイト（小文字の高さ）や文字の骨格には統一感を持たせることが肝要です。例えば、Inter と Lora の組み合わせが美しく機能するのは、Interの合理的なUI設計とLoraの滑らかな肉筆感が互いの役割を引き立て合うからです。

似たような幾何学的サンセリフ同士（例えばMontserratとPoppins）を同じサイズ感で並べると、微妙な骨格のズレが違和感を生んでしまいます。迷ったときは、ひとつのスーパーファミリーから選ぶのが確実です。例えば、 Source Sans 3 と Source Serif 4、あるいは DM Sans と DM Serif Display は、最初から完璧に調和するよう設計されています。

「Lorem ipsum」のようなダミーテキストだけで判断するのは危険です。あなたが手掛けるWebサイトの実際のキャッチコピーや、3段落ほどの本文テキストを入力して検証してください。

FontDashの タイプリハーサル や クライアント提案スタジオ を使えば、実際の見出し、ボタン、モバイルUIでの見栄えを即座にシミュレーションできます。