デザイナーなら知っておかないと損するGoogleWebフォント特選10個

    
2013/06/19
    

googlewebfonts
現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。
今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。

GoogleWebフォントを使うメリット

GoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。
  • SEO対策になる
  • 修正が簡単に行える
  • 選択してコピペできる
  • 拡大縮小・高解像度画面(Retina Displayなど)でもボケない
使わない手はありません。

GoogleWebフォントの使い方

使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。

今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ

Droid Sans / Droid Sans Mono / Droid Serif

まずは絶対欠かせないDroidファミリーから。Androidのシステムフォントとしても知られており、低解像度で小さな画面でも見やすいのが特徴です。Droid Sans(ゴシック体)、Droid Sans Mono(等幅フォント)、Droid Serif(セリフ体)と種類も豊富。お好みでどうぞ。

Droid Sans / Droid Sans Mono / Droid SerifGooglewebfonts 01

使用例

http://jonesfilmvideo.com/


※ なお、サイト内のどの位置にどのFontが使われているか知りたい方は、GoogleChromeのWhatFontを使うと便利です。

Vollkorn

見出しに使いやすいフォントです。ちなみにVollkornはドイツ語で(小麦などの)全粒粉を意味します。
VollkornGooglewebfonts 08

使用例

http://friedrichalthausen.de/

Lora

こちらも見出しに使われることが多いフォント。比較的最近できたフォントです。本文にも使えます。
LoraGooglewebfonts 04

使用例

http://www.expresssolicitors.com/assets/nhs-payout-timeline.html


Montserrat

やや平体気味のフォント。レトロなサイトの見出しとして多く使われています。
MontserratGooglewebfonts 05

使用例

http://fontslogo.com/msnbc-logo-font/


Bree

見出し・本文を問わず使えるオールマイティなフォントです。
Bree SerifGooglewebfonts 09

使用例

http://www.luciaortega.com/


Lobster

筆記体がつながった特徴的なフォントです。文字と文字のつながりがとてもスムーズでカーニングを調整しなくても使えるため、ロゴ用途向きです。
LobsterGooglewebfonts 07

使用例

http://www.zensations.at/
http://www.macaronibros.com/
http://www.spreadt.com/
http://www.usernique.com/


Playfair Display

上品なフォント。スペイン版VOGUEのWebサイトにも採用されて有名になりました。
Playfair DisplayGooglewebfonts 03

使用例

http://www.vogue.es/

使用例

Cabin

オールマイティに使えるフォント。可読性が高いです。
CabinGooglewebfonts 02

使用例

http://www.sparksonline.com/

Ubuntu

本文向きのフォントです。海外にはUbuntuフォントに根強いファンが居て、WebページのすべてをUbuntuにしてしまうChrome拡張機能まであります。
UbuntuGooglewebfonts 06

使用例

http://askubuntu.com/

Cookie

1950年代のテイストをやや加えたカリグラフィーフォント。見出しによく使われています。装飾されすぎていないので可読性が損なわれていません。
CookieGooglewebfonts 10

使用例

http://www.aniakruk.com/


いかがでしたか? 海外向けのサイトを作る時に、これを使っておけば間違いないGoogleWebフォント10個でした。

FINDJOB! Startupを購読する

職種から求人情報を探す
デザイナー・クリエイター |  Webデザイナー |  グラフィックデザイナー |  エンジニア |  インフラエンジニア |  フロントエンドエンジニア |  ディレクター・プロデューサー |  マーケティング・プロモーション |  ライター・編集 |  企画・営業・人事・総務 |  カスタマーサポート
勤務地から求人情報を探す
関東(東京近郊) |  関東(その他) |  関西(近畿・東海) |  北海道・東北 |  信越・北陸 |  中国 |  四国 |  九州・沖縄
雇用形態から求人情報を探す
正社員(中途) |  正社員(新卒) |  派遣社員 |  契約社員 |  業務委託 |  アルバイト
企業名から求人情報を探す
Copyright (C) 2021 mixi recruitment, Inc. all rights reserved.