海外のタイポグラフィが活かしたWebサイトを集めてみました!
なかなか普段日本のWebサイトをデザインする上では、欧文フォントのみでファーストビューを構成する機会はあまりありませんが、余白の活かし方やどのようなフォントを使っているのかなどを見ていくと参考になる部分もたくさんあります。
それぞれメインで使用されているフォントも調べて載せているので、ぜひフォントのチェックもしてみてください!
サンセリフ(San Sefif)系
サンセリフ体は余白をいかしたミニマムでシンプルなサイトによく合います。また、線の太いものは力強く、印象に残りやすいです。
Murray Art Museum Albury (MAMA)
- オーストラリア/美術館のサイト
- 使用フォント:Untitled Sans
- アメリカ/不動産投資のサイト
- 使用フォント:GT America
Encuentra tu médico Vegano
- スペイン/ビーガンフレンドリーな医者を探せるサイト
- 使用フォント:MD Primer
- アメリカ/ベンチャーキャピタルのサイト
- 使用フォント:Roobert
Multidisciplinary Designer | Anna Sherruble
- アメリカ(シカゴ)/デザイナー兼フロントエンドエンジニアのポートフォリオサイト
- 使用フォント:Satoshi
- ヨーロッパに複数拠点/クリエイティブエージェンシーのサイト
- 使用フォント:Sailec
Portfolio of Product Designer Jesper Dahlqvist
- スウェーデン/プロダクトデザイナーのポートフォリオサイト
- 使用フォント:Colophon Foundry
セリフ(Serif)系
セリフ体のフォントは高級感や洗練された雰囲気がでてきます。また、セリフ体をキャッチコピーや見出しなどに使い、本文はサンセリフ体にする組み合わせもよく見受けられます。
Fashion sustainability Report 2022 • Vestiaire Collective
- フランス/ファッションECのレポートサイト
- 使用フォント:Albra
- スペイン/移民関連のアーティストを取り上げるプロジェクトのサイト
- 使用フォント:Saol Display
- オーストラリア/ブランド構築支援をしている人の個人サイト
- 使用フォント:Canvas Regular
- イギリス/観葉植物のプロジェクトのサイト
- 使用フォント:Ogg Text
- カナダ/デジタルエージェンシーのサイト
- 使用フォント:IvyPresto Display
Belle Epoque : Webdesign & Web Development
- フランス(パリ)/デジタルエージェンシーのサイト
- 使用フォント:Sharp
RICCARDO NIEDDU
- イタリア/デジタルデザイナーのサイト
- 使用フォント:RL Unno
その他
- アメリカ(サンフランシスコ)/暗号通貨関連のサイト
- 使用フォント:Arthemys Display, Gustavo
- オランダ/フリーランスのインタラクティブ&クリエイティブディベロッパーのサイト
- 使用フォント:LT Terminal Mono
Refokus' Amazing Year in Review 2021
- ドイツ/Webフローエージェンシーの特設サイト
- 使用フォント:(デジタル調のフォント部分はSVGだったため不明)
JB10X
- エストニア/コンサルティング会社のサイト
- 使用フォント:Scope
- オーストラリア/モーションデザイナーのサイト
- 使用フォント:Neue Pixel
一挙に20選お届けしてみましたが、いかがでしたでしょうか?
私は今回使用されているフォントも調べてみて、Google fontsからだけでなく、様々な有料フォントもチェックしてみたくなりました。