タイポグラフィーは、ブランドやサビースのブランディング、マーケティングのプロセスにおいて重要な役割を果たしてきました。ブランドのアイデンティティーを表現することができるようなグラフィックの設計がタイポグラフィーの主な役割です。
グラフィックスの大部分を構成しているのはフォントです。一種類のフォントのみで構成されたWebサイトやブログは単調で面白みのないものになってしまします。二種類、多くても三種類のフォントを組み合わせるのが確実に好評を得ることができるアイデンティティーの形成に良いでしょう。
雰囲気の全く異なるフォントを組み合わせ、デザインの価値を損ねているのをよく見かけます。以下、フォントを組み合わせる際に気をつけるべきポイントについてまとめました。
フォントの組み合わせは視覚に訴えるもので、メッセージ性があるものでなければなりません。もしそうでなければ、ページは見劣りしてしまいます。
フォント組み合わせ:
視覚に訴えるだけでなく、題材と調和することも重要です。例えば、結婚写真のWebサイトのヘッダーにグランジ系フォントを、他の部分にシンプルな手書き風フォントを使用することはできないでしょう。見た目のバランスを乱してしまうだけでなく、サイトの美学を台無しにしてしまします。
上手くフォントを組み合わせるには、様々なフォントスタイルを把握する必要があります。 テキストのパーソナリティとして分類されます。このブログでは、最も取り入れられているフォント – セリフ体、サンセリフ体、手書き風、ディスプレイ書体、ノベルティに触れていきます。
1. スクリプト体と筆記体を組み合わせない:
筆記体としても知られている、スクリプト体は現在ブームが来ています。グラフィックスにパーソナルタッチを加え、エレガントで洗練されたものにします。しかし、これらを組み合わせるのはあまりオススメできません。これを説明するのにまず、舞台上のプリマバレリーナを想像してください。
プリマバレリーナは基本的にリードダンサーと一緒に舞台で踊る事はありません。例外として、あまり彼女にとって重要ではない役所の個性的なキャラクターやバックダンサーと一緒に踊る事はあるかもしれませんが。スクリプト体と筆記体はそれのみで使用するか、全く雰囲気の異なるものと組み合わせましょう。
2. 類似したフォント同士の組み合わせは避ける:
スタイルの似たフォント同士を上手く組み合わせるのは至難の技です。どういう事かと言うと、スタイルが似ているフォント同士だと区別がつきません。また、真逆のスタイルだとまとまって見えません。このような組み合わせは避けるようにしましょう。似たようなフォント同士を組み合わせたいのであれば、同じフォントの様々なバージョンを試すと良いでしょう。たとえば、italicと太字のitalicを組み合わせる事でダイナミックなデザインにする事ができます。しかし、やりすぎは禁物です。
3. ちょっとまった！そのフォント組み合わせ(DisplayとNovelty)：
重厚なフォントはページを強調するために用いりますが、そのようなフォント同士を組み合わせた場合、強調の効果がなくなります。displayとnoveltyの組み合わせは、両者の個性が喧嘩してしまいグラフィックがただ目障りなものになってしまいます。displayとnoveltyはそれのみで使うか、もしくはより線の細い軽い印象のフォントを用いることでタイポグラフィーがバランスのとれたものになるでしょう。
4. 複数種類のフォントを混ぜない
ご覧の通り一つのグラフィックやページに複数のフォントを組み合わせると、散らかってまとまりがないように見えます。何千種類の中から、適切なフォントを選ぶのは簡単なことではありません。どれを使うか悩んでも二種類、多くても三種類に時間がかかっても絞りましょう。
確かに現実の芸術作品では、複数のフォントを組み合わせている場合もあります。しかし全体の雰囲気としてどうか、複数のフォントを取り入れる前に考えましょう。
5. フォントのウェイトとサイズを工夫する:
二種類のフォントを組み合わせる際、様々な文字の太さ、サイズ、行間のスペースを試すのが良いでしょう。デザインは奇抜すぎずバランスが取れたもので、よく考え抜かれたものであるよう心がけましょう。雰囲気の似た二種類のフォントを組み合わせる代わりに、一種類のほんとでスペースや、ウェイトを工夫することでエッジの効いたデザインになるでしょう。
6. ビジュアルヒエラルキーを考慮する:
タイポグラフィーでは、ビジュアルヒエラルキーを考慮するのも必要不可欠です。フォントを使い分けるのは、特定の文字のかたまりが他を抑えて強調されるようにするためで 、それを実現するために太字を細字と組み合わせたりします。もしくは、スタイル、ウェイト、サイズ、カーニングを試してみるのも良いでしょう。
例えば見出しにNista Groteskを、ボディーコピーにAntique Regularを組み合わせるのもオススメです。ページの雰囲気などに合わせてNista Groteskの文字の太さを変えてみるのも良いでしょう。最近では見出しにセリフ体、ボディコピーにサンセリフ体を用いてることが多く、この組み合わせは新聞や商用ブログに適しています。
7. フォントデザイナーが手掛けたフォントは乱用しない：
デザイン初心者であれば、フォントデザイナーにより制作されたフォントを取り入れることでしょう。Envato Elementでは美しいタイポグラフィーの制作に欠かせないデザインフォントが利用可能です。Maulanacreativeではサンセリフ体や手書き風フォントを多数提供しています。
エネルギッシュな手書き風フォントでしたら、Saturasiがオススメで、Lostfield Sansとマッチします。(上のイメージのように)Saturaiはサンセリフ体の凝縮型で、複数のウェイトを持っています。
8. フォントデュオ素材は積極的に取り入れる：
現在では多くのWebサイトのプラットフォームで、デザインに直接導入可能な厳選されたフォンデュオ素材が提供されています。デザイナーがすでに一番良いフォントの組み合わせを絞り込んでいるので、オンラインプラットフォームからすぐにダウンロードでき、モード(ウェディングカードやソーシャルメディアの投稿など)により使い分けることができます。
上記はRioponというフォントデュオ素材で、優雅さと洗練を表現しておりウェディングカードやファッション関係の資料にピッタリです、
9. フォントに役割を与える:
フォントに役割を与えることで個性を作り出すことができます。特定のフォントを見出しに、それより細いものをボディーコピーに、さらに線が細いフォントをキャプションに用いることで全体として見た際にシナージ効果が期待できます。左上のように、二種類のフォント組み合わせに割り込む形で文書やページの途中で急に新しいフォントを取り入れるのはオススメできません。見た目の調和が損なわれ、フォントを適当に組み合わせているように見えてしまいます。
10. フォントの雰囲気を重視する：
それぞれのフォントの個性や雰囲気も大切にしましょう。例えば、ImpactとMTF Cool Kid.は組み合わせるのに適していません。Impactは太く、重厚な書体なのに対し、 while MTF Cool Kidはシンプルで遊び心溢れる書体です。 個性が全くことなるこれらのフォントは調和しません。上の例も参考に紹介しましょう。
Nexa Rust SlabとAirstreamといったフォントが組み合わされていますが、個性が違うだけでなく雰囲気も全く合わないため、読み手に一体感をあたえることもできません。適切なフォント組み合わせは、個性と雰囲気が似ていることが前提です。フォントだけでなく、タイポグラフィーとしてどれだけメッセージを伝えることができるのかが重要です。
ありがたいことに現在では、様々なプラットフォームで最適なフォントの組み合わせが提供されています。雰囲気やイベント、スタイルに応じて分類もされているので、用途にあったものを選びフォントパッケージとしてダウンロード可能です。以下を参考にしてください。
Envato Elementsにも評価された Font Pairでは優れたフォント組み合わせを提供しています。サイトを無料で閲覧、ダウンロードできます。サイト内のフォントからも選ぶことも可能です、もしくは用途に合わせてカデゴリーからも探すことができます。
Typespirationは全ての観点において最高のWebサイトです。様々なデザイナーの作品から抜粋されており、フォントとカラーも表示されている為、簡単にダウンロード、使用できます。CSSコードも記述してあため、Webサイトへの掲載が容易く行えます。ほぼ全ての雰囲気やコンセプトに対応した美しい組み合わせが多数あります。
インスピレーションを与えることをコンセプトにしたサイトです。プレデザインされた、WebページやLPを閲覧することができるだけでなく、フォントチョイスやどのようにそれを取り入れているか知ることもできます。サイトやLPのビジュアルランゲージに役立ちます。
フォントの組み合わせは、アートであり科学です。美的感覚だけでなく、精度も重要となってきます。正解はありませんが、視覚に訴えるものでメッセージ性があるものであれば人々の心に届かせることができます。平凡でベーシックなものより、周囲の人に聞きながら適切な組み合わせを選びましょう。十分な時間をとり、誰も見たことないような素晴らしい組み合わせを生み出しましょう。
おすすめ新着記事
おすすめタグ