デザインのヒント /

おすすめのGoogle Web Fonts 25選

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

この記事を書いた人

斧山

PAGE TOP