デザイナーなら知っておかないと損する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個でした。

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.