Advertisement

7pairfont_top

 

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フォントを使った、7個の美しいフォント組み合わせサンプル例まとめ

 

サンプル Monsterrat + Droid Serif

 

2014年Webデザイントレンドにもなっている、ミニマルスタイルとの相性もバッチリなMonsterrat。font-weightを600で使用するのがポイントです。

 

Monsterrat-+-Droid-Serif

[fancy_box]見出し Monsterrat

ボディ Droid Serif[/fancy_box]

 

 

サンプル Oswald + Lato

 

太字で読みやすい見出しタイトルに、丸みのあるやさしい印象を与えるボディテキストが素敵です。10種類のフォントウェイトを用意したLatoは、使い勝手も抜群です。

 

OSWALD-+-LATO

[fancy_box]見出し Oswald

ボディ Lato[/fancy_box]

 

 

サンプル Alegreya Sans + Merriwether

 

14種類ものフォントウェイトが用意された見出しフォントに、セリフフォントが印象的なフォントデザインがマッチします。

 

Alegreya-Sans-+-Merriwether

[fancy_box]見出し Alegreya Sans

ボディ Merriweather[/fancy_box]

 

 

サンプル Raleway + Libre Baskerville

 

フォントの太さに応じて9種類が用意されたRalewayは、シンプルでどんなデザインにも合わせやすい素材のひとつです。

 

RALEWAY-+-LIBRE-BASKERVILLE

[fancy_box]見出し Raleway

ボディ Libre Baskerville[/fancy_box]

 

 

サンプル Open Sans + Lora

 

テキストの読みやすさにこだわったOpen Sansフォントに、小説などに使われていそうなセリフフォントがピッタリです。

 

OPEN-SANS-+-LORA

[fancy_box]見出し Open Sans

ボディ Lora[/fancy_box]

 

 

サンプル Varela Round +PT Serif

 

フォントの端を丸くした見出しフォントは親しみやすく、やさしい印象を演出してくれます。

 

Varela-Round-+-PT-Serif

[fancy_box]見出し Varela Round

ボディ PT Serif[/fancy_box]

 

 

サンプル Titan One + PT Sans

 

遊びココロのあるコミカルなデザインが特長の見出しフォントに、上記ボディフォントのセリフバージョンを組み合わせています。

 

TITAN-ONE-+-PT-SANS

[fancy_box]見出し Titan One

ボディ PT Sans[/fancy_box]

 

 

参考 Googleフォントを利用している、参考お手本Webサイトデザインまとめ

実際にGoogleフォントを利用しているWebサイトを、デザインインスピレーションの参考にしても良いかもしれません。

30googlefont_top

 

 

参照元リンク : 7 Beuatiful Font Pairings Available for Free on Google Fonts – Inspired Magazine