知っておくべきWebサイトに最適なGoogle fonts12選
Mako Mizuno
2019.12.24
Updated:2024.11.15
Googleフォントを使用した洗練されたWebサイトからインスピレーションを得る
英語記事を翻訳し紹介しています。元の記事は読みたい場合は下記のリンクを確認ください。 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
Playfair Display
https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display
Playfair Displayは、2011年に設計された伝統的なセリフ体フォントですが、18世紀の書体の影響を受けています。タイトルや見出しに適していますが、段落や小さな文字には読みにくい場合があります。
Waark Website
Playfair Display + Work Sans : Niika Website
IBM Plex Mono
https://fonts.google.com/specimen/IBM+Plex+Mono
IBM Plexは、IBMのビジョンである人と機械の繋がりを表現するために設計されたフォントです。フォントファミリーにはMono以外に、Sans、Condensed、Serifがあります。
Bloquo Website
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を使用しています。この組み合わせにより、デザインに現代的でスマートな印象を与えています。
Cormorant Garamond
https://fonts.google.com/specimen/Cormorant+Garamond
Cormorant Garamondは、Christian Thalmannに設計されたセリフ体の1つで、無料で使用可能な非常にエレガントな書体です。
Conti Ducco Website
エレガントなフォントは、このWebサイトの主役でもあり、イタリアンワインとその土地の洗練された雰囲気を完全に表現しています。
Space Mono・Work Sans
https://fonts.google.com/specimen/Space+Mono
Space Monoは、1960年代の古典的な書体を呼び戻した幾何学なグロテスク体です。IBM Plexのシリーズに似ています。
Crypton Website
プロダクトの技術的品質を強調するために、Webサイト全体で画像の代わりにSpace Monoが使用されています。
Eb Garamond
https://fonts.google.com/specimen/EB+Garamond
Eb Garamondは、16世紀によく設計された有名な書体をデジタルに複製したものです。主に本などの印刷物に使用されるクラシックな書体ですが、現在ではデジタルメディアにも使用されています。
Paul Stills Website
Montserrat
https://fonts.google.com/specimen/Montserrat
Montserratは、アルゼンチンのデザイナーであるJulieta Ulanovskyが設計した書体で、ブエノスアイリスとその都市のタイポグラフィの影響を受けています。
Melville Design Website
https://www.melville-design.com/
Lazarev Agency Website
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/
