Pocket

Google Fontsは、何百ものWebフォントを無料で提供しているサービスです。最近では日本のサイトでもチラホラWeb フォントを使ったサイトが増えてきました。画像を切らなくてもいいので運用が楽だったり、SEO的にも効果的なので、みなさんのなかでも使ってみたいと思っている人も多いのではないでしょうか?
しかし、いざ使おうとした際、困るのは”知ってるフォントが少ない”こと。
「Helvetica」とか「Garamond」など有名フォントのほとんどはライセンスの関係でGoogle Fontsでは扱ってないのです。
  
ここでは私が実制作で実際に使ったフォントや定番になりつつある代表的なフォント、あの有名フォントに似ているもの、いつか使ってみたい変わり種フォントなどを集めてみました。
使い方はこちらで詳しく説明しているのでご参考ください

  

それからデザインStaff Blog
デザイナーのためのJQuery & HTML CSS 小ネタブログ
→ 脱画像化!WebFontの使い方

    

それでは早速行ってみましょう!
  
ざっくりと章立て

    

サンセリフ系

    

Open Sans

Open_Sans
オーソドックスなサンセリフ系のフォント。「Gill Sans」にそっくりです。
→Open Sans

  

Lato

Lato
こちらも「Gill Sans」にそっくりなフォント。先ほどの「Open Sans」とかなり似ていますが、全体のバランスや字詰め具合などこちらの方が品があるように思えます。
→Lato

  

Montserrat

Montserrar
「Myriad」を少し縦につぶしたようなフォント。可読性も高いので小さくしても大丈夫。日付とかに使えるかも
→Montserrat

  

Roboto

Roboto
少し縦長ですが「Helvetica」に似てるフォントありました。ウェイトがかなりたくさん用意されているので使い勝手が良さそうです。
→Roboto

  

Anton

Anton
一目で「あ、Impactだ」って思うくらい、「Impact」にそっくり
→Anton

  

Bubbler One

Bubbler_One
小文字の「a」や「e」が特徴的。フラットデザインではやっている線の細いアイコンとの相性が良さそうです。タイトルよりか小見出しくらいに向いてそうです。
→Bubbler One

  

Nunito

Nunito
丸みのあるサンセリフ体のフォント。
→Nunito

  

Pathway Gothic One

Pathway_Gothic_One
長体のかかったモダンなフォント。なかなかインパクトがあります。
→Pathway Gothic One

  

Six Caps

Six_Caps
さきほどのPathwayをさらに縦に伸ばしたようなフォント。50px以上ないと読みにくいかもしれません。
→Six Caps

    

セリフ系

  

Sorts Mill Goudy

Sorts_Mill_Goudy
「Garamond」にそっくりなエレガントなフォント。
→Sorts Mill Goudy

  

Vollkorn

Vollkorn
こちらは「Garamond」か迷ったのですが「W」の形が決め手で「Georgia」似と決めさせていただきました。他のブログでも紹介されているので結構有名かもしれません。
→Vollkorn

  

Merriweather

Merriweather
非常に可読性が高いので小さい文字でも読めそうです。日付表示などにも使えそうです。
→Merriweather

  

Rokkitt

Rokkitt
「Rockwell」ですね!個人的には好きなフォントなのでいつか使いたいです
→Rokkitt

  

Arvo

Arvo
こちらも「Rockwell」に似ていますが「o」が少し縦に長く、「W」のセリフなどが少し違います。太めのウェイトがインパクトがあってかっこいいです
→Arvo

  

Cutive Mono

Cutive_Mono
こちらも「g」の形が違いますが、「Courier New」にそっくりなフォント。これも好きなのでいつか使いたいです。
→Cutive Mono

  

Josefin Slab

Josefin_Slab
そのままロゴにしても問題ないようなお洒落なフォント。繊細なウェイトがいくつもつくられており、デザインした人のこだわりを感じます。
→Josefin Slab

    

手書き系

  

Cabin Sketch

Cabin_Sketch
フォントの上からなぞり書きしたようなフォント。ある程度大きいサイズじゃないとつぶれてしまいます。子供向けサイトなどで使うとお洒落かも。
→Cabin Sketch

  

Amatic SC

Amatic_SC
長体のかかった手描きの文字。写真の上に乗せたりすると今風な感じになりそうです。
→Amatic SC

  

Rock Salt

Rock_Salt
サインペンでサラッと書いたようなフォント。見出しなんかに使えそう。
→Rock Salt

    

その他

  

Great Vibes

Great_Vibes
エレガントなカリグラフィー風なフォント。
→Great Vibes

  

Kite One

Kite_One
絶妙な曲線や角度にこだわりを感じます。いつか使いたいです
→Kite One

  

Londrina シリーズ

Londrina
Londrinaという名前でいくつかフォントがあったのでまとめてご紹介します。「Shadow」や「Outline」など使い用によってはかっこいいかも。50px以上推奨。
→Londrina Solid
→Londrina Sketch
→Londrina Shadow
→Londrina Outline

  

Miltonian/Miltonian Tattoo

Miltoninan
レトロな雰囲気のフォント。イタリアンのサイトとかつくる際に使いたいですね!
→Miltonian
→Miltonian Tattoo

  

Pacifico

Pacifico
そのままロゴとして使えそうなフォント。なんかに似てるなと思ったら「Folli Follieのロゴ」にそっくりでした。
Pacifico

  

Special Elite

Special-Elite
タイプライターで打ったようなアナログ感が漂うフォント。
Special Elite

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。