Webサイトに最適なタイポフラフィを見つけるため、フォントを複数組み合わせることは珍しいことではありません。
デザイナーは見出しと本文のフォントをそれぞれ１つずつ選択するのが定石です。１つ目のフォントは、タイトルを目立たせるための装飾的で太いフォントで、それに対し２つ目のフォントは本文を読みやすくするために、シンプルなものである場合がほとんどです。
この領域には、流行りの組み合わせや、トレンドセッターさえ存在します。ときに斬新さや革新が求められますが、Webデザインにおけるフォント選びにおいてはクリエイティブ集団のトレンドに乗っておく方が無難でしょう。そしてつい最近、また刺激的なトレンドが現れました。
ホローフォント（袋文字）とソリッドフォント（塗りつぶした通常の文字）の組み合わせこそが、Webデザインのタイポグラフィにおける最新トレンドです。
Romain Murschel
Romain Murschelのポートフォリオは、従来のトレンドに対抗しようとするこの小さな主流にぴったりの例です。
スライダーで紹介される各プロジェクトネームを強調するために、ホローとソリッドスタイルが起用されています。オリジナリティや細かな美しさに目を惹かれます。液体のようにゆらめくキャンバスなど、革新的な特徴をもった超現代的なWebデザインとも相性が抜群です。
さらに、タイトルが比較的大きいにもかかわらず訪問者を圧倒させません。収まりが良く、しっかりと役割を果たしているため、背景の美しい写真の邪魔もしていません。
Production Portugal
Production Portugalも、とても良い例です。ヒーローエリアに魅力的な背景動画を使い、キャンペーンのスローガンが２語で示されています。「Nothing」がまず目に飛び込み、「Justify」がインパクトを繋げることで、とても良い結果を生み出しています。
Addict Rave
Production Portugal（ひとつ前の例）と同じように、Addict Raveも背景に動画を使っています。対照的な点は、Addict Raveはタイトルが大きく表示されているだけでなく、ソリッドとホロースタイルを適用した２つのビビッドなパーツに分けられている点です。「ADDICT」が主役なのは明らかですが、「RAVE」が名脇役として存在感を放っています。
Coveo Music
このトレンドの成功はほぼ確実で、現実的な応用もされます。ソリッドとホローの組み合わせは選択されたワードを強調するためによく使われます。Coveo Musicの例を見てみましょう。
スライダーの細かなこだわりが見て取れます。作品名のリストが、このサイトで１番最初に目に入ることでしょう。タイトルにカーソルを合わせると画像が浮かび上がり、タイトルが黒いソリッドからホローに変化することで選択中の作品がひと目でわかります。こぎれいでスマートなデザインです。
Tilt Story
もうおわかりのように、ソリッドとホローを組み合わせることで、単なる文字があっという間に華やかになります。ソリッドが視覚的なウェイトを大きくする一方で、ホローは軽くすることで微かに文字をぼやかしています。しかしながら、ホローのエレガントで洗練された見た目から、そのスタイルは確かに目を惹きます。
Tilt Storyの例を見てみましょう。このプロジェクトチームはソリッドとホローの組み合わせを使って、まさにそれを表現しています。プロジェクトネームを強調しながら、企業名のロゴもかっこよく今どきに表現しています。ここで最初に読むものは「BITING BACK」でしょう。しかしすぐ次に、逆さ文字になっているロゴ「TILT」が目に入ってきます。
NourishEats
何もしなくても自然にアクセントをつけ、補足要素を追加してくれる点が、このトレンドが成功する２つ目の理由です。
NourishEatsについて考えてみましょう。フロントページには左右非対称の縦に分割したスクリーンを使用し、右側よりも左側に重点を置いています。これはいくつかの点から読みとることができます。セクションのサイズはもちろんのこと、文字のスタイルからもそれを明確にさせています。繊細で軽い「Hey」よりも、「About Joanna」は、しっかりして大胆な印象を与えます。
Year in Review by Green Chameleon/ The State of European Tech
Year in Review by Green ChameleonとThe State of European Techは同じ戦略を採用しています。両サイトとも、ソリッド文字でプロジェクトネームを表示し、2018年の文字にホロー文字を使用しています。
Year in Reviewでは、2018年の文字は背景に表示されており、The State of European Techではテキストブロックの重要な一部となっています。どちらのケースも、程よく存在感を出し、追加要素としての役目を完璧に果たしています。
Wanted for Noting
Wanted for Nothingでは、ソリッド文字のタイトルが画面上のほかの要素の存在感を弱めていること気がつくことでしょう。しかし、「start」のホロー文字のおかげで、それはデザインの構成において的確で自然な位置に配置されており、ユーザーを行動に導きます。
Dolly-Agency / Vincent Saisset / Betamatters
最後のこのトレンドはタイポグラフィを装飾し、メッセージ性を強めるために絶大な効果を発揮します。Dolly-Agency、 Vincent Saisset、 Betamattersの３つの例を見てみましょう。
Dolly-Agencyのデザインクリエイティブチームは、１つの単語のみでトレンドを表現しています。結果的に、タイトルが背景にうまく溶け込み、伝えたいことをはっきりとさせています。太くてがっしりとした「start」と繊細でエレガントな「end」で目を惹く組み合わせです。
Vincent Saissetのサイトでは、ポートフォリオを平凡にならないようにみせるために、この方法を採用しています。単にアートワークのタイトルを羅列するだけでなく、フォントを組み合わせることで装飾的な役割を果たし、全体的にアーティスティックな雰囲気を印象付けています。
Betamattersのヒーローヘッダーはビジュアルウェイトがかなり重い中で、ロゴやウェルカムメッセージを目立たせています。ホローとソリッドが織りなすもう１つの連携技でしょう。
たくさんのワイヤーやシリンダーが描かれたデジタル風のクリエイティブに注目してください。ホローで立体的に表現された企業名がぴったり合っています。ソリッドを適用したウェルカムメッセージは構成にマッチし、自然と際立っています。
効果的な組み合わせ
ヒーローセクションのヘッダーとウェルカミングブロックに、ユーザーを惹きつけるような装飾するために使用される、さまざまな書体の組み合わせを見てきました。今ここに新しい変化が訪れています。
この変化はまったく新しいものではありませんが、巧みでスマートにデザインを仕上げます。ホローとソリッドスタイルの組み合わせは、ユーザーにシンプルかつエレガントな印象を与えます。このちょっとしたアイディアが、これまでのやり方に小さな変化を与えてくれます。
このテクニックはさりげなくデザインを際立たせ、時間は巧みに伝えたい意図を強調させます。したがって、うまく利用すれば、驚くほど役に立つものになることでしょう。
