ミニチュートリアル–フォントの組み合わせのガイド

「タイポグラフィは、経験と想像力に基づいた2次元のアーキテクチャであり、ルールと読みやすさによって導かれます。」 -ヘルマンツァップ

ほんの数年前、デザイナーはWebフォントの選択を厳しく制限されていました。 オプションは一般的にシステムフォントに限定されており、サイトの訪問者がそれらのフォントをインストールしてくれることを期待していました。

Webフォントは、90年代後半に技術的に可能でしたが、WOFF形式が利用可能になりW3Cオープンスタンダードの一部となった2009年まで広く使用されるようにはなりませんでした。 これにより、デザイナーにとってまったく新しい活版印刷オプションの世界が開かれました。

そして、そこにジレンマがあります。Webデザイナーが文字通り何千もの書体を利用できるようになった今、どのように連携して機能し、表示されるコンテンツをサポートするフォントの組み合わせを作成するのでしょうか。

優れたタイポグラフィと最高のフォントの組み合わせを使用することで、同業他社のデザインを高め、より快適なユーザーエクスペリエンスを実現します。 効果的なタイプの組み合わせは、デザインに視覚的な興味を追加し、訪問者をページに長くとどまらせることができます。

対照的に、悪いタイプは、コンテンツを読みにくくし、それを読む人にとって不快になる可能性があります。

フォントを効果的に組み合わせる方法を学ぶことは、デザイナーの教育における重要な足がかりであり、継続的に改良および改善する必要があります。 タイポグラフィをマスターするデザイナーは、最も単純なデザインでもより効果的にすることができます。 フォントを組み合わせるための基本的なタイポグラフィガイドラインに従うことから始めるのが最適です。 それらの「ルール」が習得されると、設計者は分岐して実験し、それらのルールを曲げたり破ったりする活版印刷の組み合わせを作成できます。

タイプ特性

何十万もの書体が利用可能であるため、高度な設計者であっても、どこから始めればよいかを理解しようとするのは大変な作業です。 さまざまな書体の特徴を理解することは、それらを効果的に組み合わせる方法を学ぶための最初のステップです。

これらの特性が互いにどのように関連しているかを学ぶことで、デザイナーは自信を持ってフォントを組み合わせたり、予期しない組み合わせを試したりすることができます。 実験と実践は、デザイナーがフォントの組み合わせスキルを真に磨き、他の専門家とは一線を画すデザインを作成できる場所です。 時々、彼らの直感に耳を傾けることは、本当に輝く書体の組み合わせを作成するための最良の方法です。

分類

書体分類は、理解すべき最も基本的な概念の1つです。 学ぶべき4つの主要な分類があります：セリフ、サンセリフ、スクリプト、そして装飾。

セリフ書体とサンセリフ書体は、見出しと本文の両方に適しています。 ただし、スクリプト（手書きフォントとも呼ばれる）および装飾書体は、通常、見出しやタイトル、またはその他の小さなテキストの塊にのみ使用できます。

セリフフォントは、テキストの長いチャンク（本文テキストなど）で読みやすくなると考えられています。特に印刷デザインでは、セリフ機能が各行に沿って読者の目を導くのに役立ちます。 ただし、サンセリフ書体は読みやすく、小さいサイズ（キャプションやメタ情報に使用されるものなど）でも優れています。

サンセリフはウェブ上での使用にも人気があり、セリフ書体よりも読みやすいと広く信じられています。 その一部は、コンピューティングの初期の頃、低解像度の画面でサイズによってはセリフフォントがややぼやけていたことが原因です。 最新のHDおよびRetina画面では、これはそれほど問題ではなく、セリフ書体とサンセリフ書体の両方を効果的に使用できます。

すでに組み込まれているフォント間にはある程度のコントラストがあるため、異なる分類の書体を組み合わせるのは、分類内で組み合わせるよりも簡単なことがよくあります。 とはいえ、他の特性を考慮すれば、同じクラスの書体を効果的に組み合わせることができます。

重さ

太さは、書体内のフォントの太さを指します。 ウェイトの例としては、シン、レギュラー、セミボールド、ボールド、ブラックがあります。

書体を組み合わせる場合は、ウェイト間のコントラストが不可欠です。 非常に太いフォントと非常に軽いフォントを組み合わせると、バランスが崩れることがよくあります。 しかし、同じ重さの書体を組み合わせるのも難しい場合があります。

代わりに、特にフォントの組み合わせから始める場合は、目立つが極端ではない太さの書体を見つけるのが最も簡単です。 設計者はそこからより目立つ区別に分岐することができます。

スタイル

スタイルは分類と同じ意味で使用されることがありますが、この場合、フォントは通常、斜体、または斜体のいずれかを指します。

異なるスタイルが使用されているフォントを組み合わせる場合は、斜体または斜体のスタイルが通常のスタイルと同様に機能することを確認することが重要です。 イタリック体のスタイルは、同じフォントの通常のスタイルとは大きく異なる場合があります。これにより、他の方法ではうまく機能するフォントが突然衝突する可能性があります。

対比

書体を組み合わせる際のコントラストには注意が必要です。 コントラストが少なすぎるとフォントが衝突する可能性があり、コントラストが多すぎると同じことが起こります。

フォントを組み合わせるときのコントラストとは、分類、太さ、スタイル、構造など、フォントが異なるあらゆる方法を指します。

始めるときは、他のものが非常に類似していることを確認しながら、それらのうちの1つまたは2つだけのコントラストに焦点を当てることが最善です。 太さは、フォント間のコントラストを作成する最も簡単な方法の1つです。 すでに述べたように、重量のコントラストが大きすぎると、少なすぎるのと同じくらい耳障りになる可能性があります。

コントラストを作成するもう1つの簡単な方法は、サンセリフとセリフ、スクリプトとセリフなど、フォントのさまざまな分類を組み合わせることです。このような場合、2つのフォントのムードが一致していることを確認することが重要です。

たとえば、Amatic SCのようなよりカジュアルなフォントと、Baskervilleのような非常にフォーマルなフォントを組み合わせると、コントラストではなく衝突します。 しかし、AmaticSCのようなものとJosefinSlabのような別のカジュアルフォントを組み合わせると、見事に機能します。

エックスハイト

X-heightは、書体内の個々の文字の高さ、具体的には小文字のxを指します。 同様のx高さの書体は、さまざまなx高さの書体よりもうまく連携します。

構造

書体の基本構造には、そのすべての特性に加えて、文字の基本的な形状や間隔などが含まれます。 フォントの構造とのコントラストを作成することは、フォントを組み合わせる確立された方法です。 ただし、大きく異なるフォントではなく、少なくともいくつかの共通の構造要素（x-heightや「通常の」スタイルの重みなど）を持つフォントを選択することをお勧めします。

ムード

気分はタイポグラフィのより主観的な領域の1つです。 それは、書体がどれほどフォーマルかインフォーマルか、そしてそれが遊び心のある、女性的な、男性的な、カジュアルな、深刻なものかどうかなどを指します。

たとえば、Comic Sansは非常に非公式なフォントであり、ほとんどの状況での使用には不適切です。 一方、Bickham Scriptは非常にフォーマルですが、ビジネスのやり取りなどに間違った印象を与えます。

フォントを組み合わせるときは、似たようなムードの書体を見つけることが重要です。 遊び心のあるフォントと非常に深刻なフォントを組み合わせると、目に不快感を与えるでしょう。

装飾、色、質感

これらは書体に固有の特性ではありませんが、フォントを組み合わせるときに役立ちます。 色、装飾（下線など）、テクスチャを統一（またはコントラストを高める）することは、非常に効果的な手法です。

効果的なフォントの組み合わせ

そこには、美しいタイポグラフィを備えたサイトが無限に供給されているように見えます。また、タイプが悪い、または単に光沢がないサイトも同様に無限に供給されています。 それを正しく理解するサイトを研究することは、デザイナーが始めているとき、またはスキルを次のレベルに引き上げようとしているときに、フォントを組み合わせる方法を学ぶための素晴らしい方法です。

Work Notesは、セリフ書体のAdobe CaslonProとサンセリフ州間高速道路を組み合わせて、古臭さや古風さを感じることなく、伝統に賛同するタイプの組み合わせを作成します。 さまざまな重みとスタイルを組み合わせると、視覚的な関心が高まり、タイポグラフィが実際よりも複雑に感じられます。

Adjuvant Capitalは、モダンで少し気まぐれなセリフ書体OrpheusProとモダンなGTAmericasansserif書体を組み合わせて使用​​しています。 金融サービス会社にとって、これは非常に現代的な選択ですが、社会的に責任のあるグローバル投資という彼らの使命とうまく機能します。

Bloomscapeは、カジュアルなセリフ書体のMorionとサンセリフのRaisonneを使用して、印象的でモダンな活版印刷のデザインを作成しています。 モリオンは、より装飾的な文字の形であるため、必ずしも体型に適しているとは限りませんが、適切なサイズで使用すると（ここにあるように）、本文の短いチャンクに最適です。 レゾネにも同様に装飾的な文字の形があり、2つのWebフォントが美しく連携します。

ヴォーグは、モダンでエレガントなサボイセリフ書体と、1902年に設計されたグロテスクなサンセリフフランクリンゴシックを組み合わせています。この2つを組み合わせることで、雑誌の対象となる文化的な聴衆にアピールする高級なタイプのデザインが作成されます。

サザンライフスタイルマガジンGarden＆Gunのサイトには、ここに含まれている他の雑誌よりも複雑なタイポグラフィがあり、それが他とは一線を画しています。 このサイトでは、全体を通して4つの主要な書体を使用しています。主要な記事のタイトルは、serifDomaineDisplayです。 本文とホームページのいくつかの見出しは、セリフフォントのドメーヌテキストです。 メタ情報、ナビゲーション、およびセクションヘッダーは、サンセリフAvenirNextを使用します。 ホームページの追加のセクションヘッダーは、DomaineSansDisplayにあります。

より大きなタイプファミリー内から複数のフォントを使用することは、完全に調整する複雑なタイポグラフィデザインを作成するための実証済みの方法です。 Avenir Nextを追加すると、物事が分割され、視覚的な関心がさらに高まります。

書体の選択は、それを使って行うことと同じくらい重要です。

—ボニー・シーグラー

結論

効果的なフォントの組み合わせは、優れたデザインの特徴です。 デザイナーは、同時代の人々とは一線を画す優れたデザインを作成したい場合、このスキルを習得する必要があります。

タイプを効果的に組み合わせる方法を探求するための出発点として、ここに含まれているガイドラインを検討してください。 強固な基盤により、完全に不適切な組み合わせに何時間も費やすことなく、より効率的な実験が可能になります。 ここから、設計者は、フォントを効果的に組み合わせるための独自のスタイルと方法を作成する練習をすることができます。必要に応じてガイドラインから逸脱し、最終製品がユーザーに喜ばれることを確信できます。

Toptal Designブログでさらに読む：

• 読みやすさのための設計– Webタイポグラフィのガイド（インフォグラフィック付き）
• 書体分類のニュアンスを理解する
• タイポグラフィの解剖学の複雑さを分析する（インフォグラフィック付き）
• 効果的な活版印刷の階層を構築する方法
• Webおよび印刷デザインの書体スタイ​​ル