【Webデザイナー必見】タイポグラフィで魅せるWebサイト10選

ここのURLをクリップボードにコピー(copied!)

Webデザインにおけるタイポグラフィとは？

タイポグラフィは、Webサイトのデザインを制作するにあたって、視覚的に情報を伝えたりブランドイメージを形成する重要な役割を担っています。最近は『Adobe font』や『Google font』の普及によって、手軽に使用することができるWebフォントの種類も増えてきました。
現在『Adobe font』では20,000以上、『Google font』では1,400以上のフォントを使用することができます（2023年11月時点）。
※Adobe fontの利用には、Adobe Creative Cloudへの加入が必要です。

Webフォントの普及によって、大胆にレイアウトされたタイポグラフィとWebならではのインタラクティブな表現を組み合わせたサイトも増えています。
そこで今回は、欧文フォントのタイポグラフィでファーストビューが構成されているWebサイトに絞り、そのなかでも厳選した10件をご紹介します。すべて『Adobe font』あるいは『Google font』で使用可能なフォントが用いられているWebサイトです。フォントや提供先も合わせて紹介しているので、参考にしてみてください。

※フォントを利用する場合は、必ず利用規約をご確認ください。
利用規約：Adobe font, Google font

Meno Banner

フォント：Meno Manner
ウェイト：36種類
提供：Adobe font

シャープに処理された「セリフ（※）」に特徴があり、単体使いでも様になるフォントです。
縦横比のコントラストが強いため本文にはあまり向いていませんが、見出しなどの目立たせたい部分や装飾としての使用におすすめです。
ウェイトが合計36種類とバリエーションが非常に豊富であるため、参考サイトのように一部の文字のみイタリックを使用するなど、一つのフォントで表現に幅を持たせることができます。

※セリフ…欧文活字書体の起筆部または終筆部にある、ひげのような飾り。（コトバンクより）

Lexend Giga

使用フォント：Lexend Giga
ウェイト：9種類
提供：Google font

縦に潰れたような楕円形状と広めのカーニングが特徴的なフォントです。
参考サイトでは、文字間を少し詰めて調整しつつ、タイポグラフィを大胆にレイアウトすることで、インパクトのある訴求をしています。
少々クセはありますが、一定の視認性・可読性を担保しつつシンプルなデザインのアクセントとして上手く機能してくれるため、フォントで少し個性をプラスしたい場合におすすめです。

Century Old Style

使用フォント：Century Old Style
ウェイト：3種類
提供：Adobe font

存在感のある「セリフ」が特徴的で、その名の通りクラシカルな雰囲気を持つオールドスタイル・ローマン体のフォントです。
参考サイトは、カラフルな色使いとイラストの組み合わせで一見賑やかな印象ですが、あえてクラシカルなタイポグラフィを大きく配置することで、ポップな印象を緩和しサイト全体の雰囲気を引き締めています。デザインにフォーマルな要素を加えたい場合に、おすすめのフォントです。

Montserrat

使用フォント：Montserrat
ウェイト：36種類
提供：Adobe font, Google font

少し平体がかかっているフォントで、クセがなく安定感のある風格が特徴です。
視認性・可読性の高さに加え、ウェイトも合計36種類とバリエーションが非常に豊富であるため、ユーザーの属性が幅広いサイトなど、様々な場面で活用してくれます。
参考サイトのように、大きいサイズで配置してもスッキリと美しい形が保たれるため、見出しとしての使用もおすすめです。ウェイトによって、ユーザーに与えたい印象をコントロールすることもできるので、知っておいて損はない優秀なフォントです。

Cardo

使用フォント：Cardo
ウェイト：3種類
提供：Adobe font, Google font

線が細くスタイリッシュな印象ですが、大文字は丸みを帯びており親しみやすさも伏せ持っているため、ベーシックに使用できるバランスの良いフォントです。
参考サイトでは、訴求内容によって大文字と小文字を使い分けたりサイズにコントラストをつけることによって、一つのフォントでも単調な印象にならないような工夫が施されています。さりげないアクセントとして機能してくれるため、「ミニマルさ」や「上質感」を表現したい場面におすすめのフォントです。

EB Garamond

使用フォント：EB Garamond
ウェイト：10種類
提供：Adobe font, Google font

16世紀に生まれた『Garamond』をデジタル用に複製したフォントです。
『Garamond』は、上品でクラシカルな雰囲気のオールドスタイル・ローマン体の代表格であり、その歴史上非常に多くのバリエーションがつくられています。
クセがなく読みやすいため和文フォントとの相性も良く、和欧混植で組まれることも珍しくありません。
参考サイトでは主に装飾として用いられていますが、スタンダードなフォントでありながら洗練さも伏せ持っているため応用範囲が広く、見出しから本文まで使うことができます。

Adobe Garamond Pro

使用フォント：Adobe Garamond Pro
ウェイト：6種類
提供：Adobe font

先ほどご紹介した『EB Garamond』と同様に、こちらも『Garamond』から派生してつくられたフォントです。
少し長めにデザインされた「はらい」が特徴的で、見出しに使うとスッキリとした印象を与えます。
参考サイトでは、太いウェイトを使用することによって、『Garamond』が持つ上品でクラシカルな雰囲気とは少し異なるポップな印象を与えています。
非常に使い勝手が良く、デザインテイストを選ばず馴染んでくれるため、知っておいて損はないフォントです。

Acumin

使用フォント：Acumin
ウェイト：18種類
提供：Adobe font

全体的にクセがなく形が整っており、良い意味で個性があまりないフォントです。
参考サイトでは、太いウェイトで大胆にタイポグラフィを配置することによって、力強いメッセージを訴求しています。装飾性の少ないフォントであるがゆえ、スッキリとシンプルな印象です。
その他の要素を妨げないため、フォント以外の部分にフォーカスして訴求したい要素がある場合におすすめです。

Cormorant Infant

使用フォント：Cormorant Infant
ウェイト：10種類
提供：Google font

大文字はスタンダードな印象ですが、小文字は少し丸みを帯びた形とシャープな「セリフ」が目を引く、やや個性的な雰囲気のあるフォントです。
オーソドックスなセリフ体と比較すると、細部が特徴的な形状をしているため、フォントでさりげないアクセントを効かせることができます。
線幅に強弱があるため小さいサイズの可読性は低いですが、参考サイトはタイポグラフィを大胆に大文字でレイアウトすることで、可読性を担保してます。また、ジャンプ率を高くすることで、単調にならずメリハリが効いている印象です。

Harogen

使用フォント：Harogen
ウェイト：14種類
提供：Adobe font

少し平体がかかった形と均一な線幅が特徴的で、無機質でシステマチックな印象のフォントです。小文字は文字端の鋭さが強調されており、より個性的な雰囲気があります。
参考サイトでは、ダークカラーの背景とカーソルに追従する水面のような動きを組み合わせることで、近未来的な雰囲気を演出しています。デザインとフォントの親和性が非常に高い印象です。
同じ歯医者のWebサイトではありますが、先ほどご紹介した『Y’s DENTAL CLINIC』とはデザインの方向性が異なります。
使用する場面を選ぶフォントではありますが、個性的な世界観を演出したい場合におすすめです。

まとめ：タイポグラフィで情報を効果的に伝えよう

今回は、欧文フォントでファーストビューが構成されているサイトの中から、『Adobe font』あるいは『Google font』で使用可能なフォントが用いられている質の高いWebサイトを厳選してご紹介しました。
タイポグラフィは、フォントやサイズなどの様々な要素によって、情報を視覚的かつ効果的に伝えることができます。Webサイトのデザインにおいて欠かせない要素であるため、適切な方法で表現に取り入れていきたいですね。

参考

• 小林章(2020) . 『欧文書体ーその背景と使い方ー』. 株式会社美術出版社.
• 小林章(2018) . 『欧文書体2ー定番書体と演出法ー』. 株式会社美術出版社.