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

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

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

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

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

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

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

タイプ特性

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

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

分類

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

::はC ++で何をしますか

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

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

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

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

重量

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

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

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

スタイル

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

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

コントラスト

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

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

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

コントラストを作成するもう1つの簡単な方法は、サンセリフとセリフ、スクリプトとセリフなど、フォントのさまざまな分類を組み合わせることです。このような場合は、 気分 2つのフォントの一致が不可欠です。

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

エックスハイト

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

構造

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

気分

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

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

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

.hppと.cpp

装飾、色、質感

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

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

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

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

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

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

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

トップ100シングルファミリーオフィス

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

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

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

—ボニー・シーグラー

結論

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

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

•••

ApeeScapeデザインブログの詳細：

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

基本を理解する

どのフォントがうまく調和しますか？

どのフォントの組み合わせが組み合わされるかは、コントラスト、構造、エックスハイト、ムード、および重量といういくつかの要素に帰着します。これらの関係を考慮して比較することで、デザイナーは、表面が大きく異なっていても、一緒に作られたように見えるフォントを選択できます。

補完的なフォントをどのように選択しますか？

補完的なフォントの組み合わせを選択するときは、分類、雰囲気、重さ、コントラスト（多すぎない、または少なすぎない）、および各書体のエックスハイトと構造を考慮してください。補完フォントは、共通の特性（x-heightなど）と相違点（分類など）のバランスが取れている必要があります。

最も一般的な3つのフォントスタイルは何ですか？

4つの一般的なフォント分類（スタイルと呼ばれることもあります）があります。serifとsans serifが最も一般的ですが、ディスプレイとスクリプトの書体も広く使用されています。等幅書体は、あまり一般的に使用されない5番目のスタイルを構成します（ただし、コードの表示などで人気があります）。