Webデザインで可能性を広げてくれるツールのひとつが、Webフォントです。クラウド上にあるフォントファイルを参照するので、PCにインストールしていないフォント表示にも対応してくれます。Webフォントサービスを提供しているサイトも増えてきていますが、やはり使い勝手が良いのはGoogleフォントではないでしょうか。
海外デザインブログInspired Magazineで、デザインセンスの良いGoogleフォントの組み合わせサンプル例をまとめたエントリー「7 Beautiful Font Pairings Available for Free on Google Fonts」が公開されていたので、今回はご紹介します。
Webフォントの詳しい使い方については以下のエントリーで紹介しています、参考にしてみてはいかがでしょう。
[list type=”hot”] [li]Googleフォントを利用している、参考お手本Webサイトデザインまとめ[/li] [/list]
詳細は以下から。
Googleフォントを使った、７個の美しいフォント組み合わせサンプル例まとめ
サンプル Monsterrat + Droid Serif
2014年Webデザイントレンドにもなっている、ミニマルスタイルとの相性もバッチリなMonsterrat。font-weightを600で使用するのがポイントです。
[fancy_box]見出し Monsterrat
ボディ Droid Serif[/fancy_box]
サンプル Oswald + Lato
太字で読みやすい見出しタイトルに、丸みのあるやさしい印象を与えるボディテキストが素敵です。10種類のフォントウェイトを用意したLatoは、使い勝手も抜群です。
[fancy_box]見出し Oswald
ボディ Lato[/fancy_box]
サンプル Alegreya Sans + Merriwether
14種類ものフォントウェイトが用意された見出しフォントに、セリフフォントが印象的なフォントデザインがマッチします。
[fancy_box]見出し Alegreya Sans
ボディ Merriweather[/fancy_box]
サンプル Raleway + Libre Baskerville
フォントの太さに応じて9種類が用意されたRalewayは、シンプルでどんなデザインにも合わせやすい素材のひとつです。
[fancy_box]見出し Raleway
ボディ Libre Baskerville[/fancy_box]
サンプル Open Sans + Lora
テキストの読みやすさにこだわったOpen Sansフォントに、小説などに使われていそうなセリフフォントがピッタリです。
[fancy_box]見出し Open Sans
ボディ Lora[/fancy_box]
サンプル Varela Round +PT Serif
フォントの端を丸くした見出しフォントは親しみやすく、やさしい印象を演出してくれます。
[fancy_box]見出し Varela Round
ボディ PT Serif[/fancy_box]
サンプル Titan One + PT Sans
遊びココロのあるコミカルなデザインが特長の見出しフォントに、上記ボディフォントのセリフバージョンを組み合わせています。
[fancy_box]見出し Titan One
ボディ PT Sans[/fancy_box]
参考 Googleフォントを利用している、参考お手本Webサイトデザインまとめ
実際にGoogleフォントを利用しているWebサイトを、デザインインスピレーションの参考にしても良いかもしれません。
参照元リンク : 7 Beuatiful Font Pairings Available for Free on Google Fonts – Inspired Magazine
