デザイナー目線。モノ・コト紹介するサイト

厳選9書体!おすすめのGoogle Fontsをサンプル交えてご紹介

デザインコラム

サイトを作る時にGoogle Fontsを利用すると一気に雰囲気がオシャレになりますよね。
しかし種類がとても多く、そのうえ自分のサイトで使うときは日本語と交えて使うため選考が難しいと感じるのではないでしょうか?

今回はそんなあなたのために当サイトで厳選したフォントを、更に日本語のサンプルと交えて簡単にデザインを作ってみましたのでご紹介したいと思います。

スポンサードサーチ

Google Fontsとは?

そもそもGoogle Fontsって何?という方はご紹介しているサイトが大量に存在しますのでこのページでは省略させて頂きます。

簡単に言うと無料で利用できるクラウドフォントサービスですが、詳しくは“google fonts 使い方”などのキーワードで探してみてくださいね。

ゴシック系フォント

Source Sans Pro

似たようなフォントはとても多いのですが縮小してみると見づらかったり、ちょっとしたクセが気になったりします。
しかしSource Sans Proはクセがなく拡大縮小してもとても見やすいため、サイトのベースフォントとして利用することが多いです。

ちなみに上記デザインの日本語は同じくGoogle FontsのNoto Sans CJK JPを利用して表現しています。

Yanone Kaffeesatz

Yanone Kaffeesatzは細いラインとコンデンスドな形がとてもスタイリッシュなフォントです。
雰囲気がテラスハウスのロゴに似ていますが、まさにあのスタイリッシュな雰囲気を表現したい場合はこのフォントを試してみてください。

Raleway

このRalewayもサイトをスマートに、スタイリッシュに表現してくれます。細いラインでデザインしましたが太さが9種類もあります。
飾りがなくニュートラルに作られていますが、それでいて個性がありサイトを上質に表現してくれるフォントですね。

スポンサードサーチ

明朝系フォント

Playfair Display

クラシカルに、上品にサイトを表現したい場合はこのPlayfair Displayを使うことが多いです。ただし文字が小さくなると多少読みづらくなるため、似た印象で読みやすいSource Serif Proで表現した方が良いかもしれません。

なお、上記デザインの日本語フォントはTypeSquareで利用可能な日本語Webフォント「A1明朝」で表現しています。

Cinzel

古代ローマ字をベースに現代風にアレンジしたというこのフォントは、威厳・博物館的なアカデミックな印象を表現したい場合にとてもハマると思います。
一方で、ウェディング系でも上質なクラシカル感が表現できるのでおすすめです。似たフォントがありますがCinzelが最もバランスとりやすくて好きですね。

Nixie One

Nixie Oneはゴシックっぽい印象があります。一応ヒゲがありますので明朝系でご紹介させて頂きましたが、どちらも混ざっていると思います。その通りスタイリッシュでありながらも知的な印象も表現されたフォントです。

手書き風フォント

Amatic SC

ラフな手書きでオシャレに書かれたAmatic SCは、サイトをカジュアルに表現したい時に利用したいフォントです。
ゴシックと違いバランスをとるために多少工夫が必要ですが、ラフな感じはサイトをとても豊かに表現してくれます。アパレル・サーフ系にハマりそうです。

Kranky

Krankyはまた違ったラフな印象を与えるフォントです。
こちらは少し文字間隔を開けて子供向けのサイトでカラフルに利用すると良いかもしれませんね。オシャレな子供向けサイトにハマりそうです。

Life Savers

こちらはスッキリしながら、文字の位置を少しズラした形がワクワク感を感じさせるフォントです。
ラフな感じにしたいけれど、やりすぎたくないような時に、このフォントはバランス良くハマってくれますね。

スポンサードサーチ

まとめ

厳選9書体!おすすめのGoogle Fontsをサンプル交えてご紹介

Google Fontsは今や800種類以上ありますが、そんな中から厳選した9書体をご紹介してまいりました。更にイメージが伝わりやすいよう日本語の文字と組み合わせてみましたが、いかがでしたでしょうか?厳選書体はどれもバランス良く使いやすいものばかりです。

現在では日本語のフォントもリリースされ始めていますので、気になるフォントなどあれば積極的に利用してみましょう。

※ちなみにAdobe CCにはモリサワなどの日本語書体が107書体ほど無料で使えるAdobeフォントというサービスが付属します。
Adobe CCを年額39,980円(税込)で手に入れる方法についても掲載しておりますので、興味のある方はぜひご覧ください

【Adobe CCを安く買う方法】社会人OK!格安39,980円/年<講座付き>