Webデザイン記事

知っておくべきWebサイトに最適なGoogle fonts12選

Googleフォントを使用した洗練されたWebサイトからインスピレーションを得る

Mako Mizuno

英語記事を翻訳し紹介しています。元の記事は読みたい場合は下記のリンクを確認ください。 https://blog.studio.design/posts/12-google-fonts-websites

近頃では、タイポグラフィはWebデザインの中心的役割 と言えるでしょう。メイン画像の代わりに大胆で目立つテキストを配置するレイアウトは、最近のトレンドの1つでもあります。

デザインに適切な書体を選ぶことは、美しさだけではなくアクセシビリティや可読性 にも関わっているため、完成度の高いWebサイトをデザインするためにも必要不可欠です。

Googleフォントは、135の言語に対応しており900以上の無料のWebフォントを使用することができます。 使用する際に、PCにフォントをダウンロードしてインストールする必要がなく、フォントはデザインの質や可読性が高く、さまざまな用途やデバイスに対応可能なアクセシビリティのための書体が厳選されています。

STUDIOでは、編集画面からGoogleフォントを参照しどのフォントも使用することができます。 さらに、プロジェクトごとにフォントライブラリーを作成し管理することができます。

ここでは、Googleフォントの代表例とそのフォントを使用した12の優れたWebサイト を紹介します。クリエイティブなデザイナーの仕事から、無料のリソースを最大限に活用する方法が得られるはずです。

Work Sans

https://fonts.google.com/specimen/Work+Sans

Work Sansは、初期のグロテスク体がベースになっています。印刷、画面表示の両方に適しています。

Best Running Shoes

https://bestrunningshoes.com/

Playfair Display

https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display

Playfair Displayは、2011年に設計された伝統的なセリフ体フォントですが、18世紀の書体の影響を受けています。タイトルや見出しに適していますが、段落や小さな文字には読みにくい場合があります。

Waark Website

https://waaark.com/

Playfair Display + Work Sans : Niika Website

https://www.niika.com.au/

IBM Plex Mono

https://fonts.google.com/specimen/IBM+Plex+Mono

IBM Plexは、IBMのビジョンである人と機械の繋がりを表現するために設計されたフォントです。フォントファミリーにはMono以外に、Sans、Condensed、Serifがあります。

Bloquo Website

https://bloquo.cc/

Spectral・Karla

https://fonts.google.com/specimen/Spectral

Spectralは、文章の多い段落に適した美しいセリフ書体ですが、以下のWebサイトのように見出しやタイトルにも適しています。

https://fonts.google.com/specimen/Karla

Karlaは、レギュラーとボールドで利用可能なグロテスク・サンセリフ体です。

Anywhere Workers Website

このWebサイトでは、タイトルにSpectral、本文にKarlaというフォントの組み合わせでデザインされています。

https://www.and.co/anywhere-workers

Raleway・PT Sans

https://fonts.google.com/specimen/Raleway

Ralewayは、特にタイトルや見出しに適した上品なサンセリフ体です。8つの異なる太さがあります。

https://fonts.google.com/specimen/PT+Sans

PT Sansは、ロシア連邦のためのフォントプロジェクトで開発されたため、キリル文字もサポートしています。また、PT Serifも同じプロジェクトです。

Ron Design Lab Website

このWebサイトでは、タイトルや見出しにRaleway、本文にPT Sansを使用しています。この組み合わせにより、デザインに現代的でスマートな印象を与えています。

https://rondesignlab.com/

Cormorant Garamond

https://fonts.google.com/specimen/Cormorant+Garamond

Cormorant Garamondは、Christian Thalmannに設計されたセリフ体の1つで、無料で使用可能な非常にエレガントな書体です。

Conti Ducco Website

エレガントなフォントは、このWebサイトの主役でもあり、イタリアンワインとその土地の洗練された雰囲気を完全に表現しています。

http://www.contiducco.it/

Space Mono・Work Sans

https://fonts.google.com/specimen/Space+Mono

Space Monoは、1960年代の古典的な書体を呼び戻した幾何学なグロテスク体です。IBM Plexのシリーズに似ています。

Crypton Website

プロダクトの技術的品質を強調するために、Webサイト全体で画像の代わりにSpace Monoが使用されています。

https://crypton.trading/

Eb Garamond

https://fonts.google.com/specimen/EB+Garamond

Eb Garamondは、16世紀によく設計された有名な書体をデジタルに複製したものです。主に本などの印刷物に使用されるクラシックな書体ですが、現在ではデジタルメディアにも使用されています。

Paul Stills Website

http://stills.mauer.co/

Montserrat

https://fonts.google.com/specimen/Montserrat

Montserratは、アルゼンチンのデザイナーであるJulieta Ulanovskyが設計した書体で、ブエノスアイリスとその都市のタイポグラフィの影響を受けています。

Melville Design Website

https://www.melville-design.com/

Lazarev Agency Website

https://www.lazarev.agency/

Inknut Antiqua

https://fonts.google.com/specimen/Inknut+Antiqua/

Inknut Antiquaは、ヒューマニストの原稿で使用されるフォントの影響を受けた長文用のAntiqua書体です。また、低解像度の画面表示に適しています。

Matteo Giuseppe Pani Website

https://www.matteogiuseppepani.com/

今回紹介したタイポグラフィから、多くのインスピレーションを読み手のみなさんが得られれば幸いです。Googleフォントには、さらに数多くの素晴らしいフォントがあります。フォントの組み合わせもあわせてチェックしてみてください。https://fonts.google.com/