Ownedmedia ウェブ制作に役立つコンテンツを発信中!

タイポグラフィ 2019.12.31

便利に使えるグーグルフォントのオススメ書体まとめ

Tags: ,,

グーグルフォントはグーグルが提供している無料で使えて、種類も豊富なフォント配信サービスです。実際に導入しているサイトも数多く、私自身もクライアントワークでもよく利用しています。ただ、グーグルフォントは扱える書体もかなり多いため、初めて利用する際にはどれを使うか迷う人も多いのではないでしょうか。そこで今回はどんなデザインでも対応できるように、覚えておくと便利なグーグルフォントのオススメ書体をまとめてみたいと思います。

【Google Fonts】
https://fonts.google.com

 

グーグルフォントのサイトにアクセスすると、このように様々な書体が並び、使う書体を選択すると、CDNとして使うHTMLタグと埋め込み用のCSSコードが出力される仕組みで、デスクトップフォントとしてもフォントデータがダウンロードできます。

便利に使えるグーグルフォントのオススメ書体まとめ

便利に使えるグーグルフォントのオススメ書体まとめ

フォントを探すときには、入力するなどで検索ができるのでとても使いやすいですね。今回は人気のある順にソートして、その中からピックアップしていきたいと思います。

 

欧文書体でオススメのグーグルフォント

【Roboto】

https://fonts.google.com/specimen/Roboto

便利に使えるグーグルフォントのオススメ書体まとめ

グロテスクサンセリフタイプの書体で、ウエイトもたくさん揃っておりとても使いやすい書体になるのではないでしょうか。モバイル端末でも視認性が良く、現代のウェブサイトにとても相性の良いフォントです。迷ったらまずはこの書体を入れておくといいですね。

 

【Lato】

https://fonts.google.com/specimen/Lato

便利に使えるグーグルフォントのオススメ書体まとめ

ヒューマニスティックサンセリフと呼ばれるタイプの書体で、先ほどのRobotoとよく似ていますが、曲線的な作りになっており、少し柔かい印象があります。Robotoでは無機質で冷たく感じる時には代わりに使える書体ですね。

 

【Roboto Slab】

https://fonts.google.com/specimen/Roboto+Slab

便利に使えるグーグルフォントのオススメ書体まとめ

グーグルフォントの中でもスラブセリフ書体はたくさんありますが、比較的使いやすい形で、ウエイトもたくさん揃っているのはこの書体になります。この書体でスラブセリフフォントはカバーできそうですね。

 

【Oswald】

https://fonts.google.com/specimen/Oswald

便利に使えるグーグルフォントのオススメ書体まとめ

幅が狭いコンデンス系フォントになります。クールでシャープな印象を与えることができますので、デザイン性の高いサイトでは重宝しそうです。ボディテキストだけでなく、キャッチコピーにも使えますね。

 

【Montserrat】

https://fonts.google.com/specimen/Montserrat

便利に使えるグーグルフォントのオススメ書体まとめ

ジオメトリック系のサンセリフ書体になります。オシャレで洗練された印象を与えることができます。形もベーシックなものになるので、比較的使いやすいのではないでしょうか。

 

【Raleway】

https://fonts.google.com/specimen/Raleway

便利に使えるグーグルフォントのオススメ書体まとめ

先ほどのMontserratと同じくこちらもジオメトリック系のサンセリフ書体になります。ただしこちらは少し形が特徴的で、よりデザイン性の高い場合に使えるのではないでしょうか。数字の場合は少しクセが強いので注意が必要ですね。

 

【Playfair Display】

https://fonts.google.com/specimen/Playfair+Display

便利に使えるグーグルフォントのオススメ書体まとめ

セリフ書体の中でも、洗練された印象を持つモダンフェイス系のフォントになります。ファッション系やハイブランドなどのイメージを表現するのに重宝します。女性向けのデザインとも相性が良さそうですね。

 

【Abril Fatface】

https://fonts.google.com/specimen/Abril+Fatface

便利に使えるグーグルフォントのオススメ書体まとめ

同じくこちらもモダンフェイス系のセリフ書体になりますが、よりコントラストが強く直線的になっており、どちらかというとディスプレイ書体に近い印象もあります。ボディテキストには使いにくいですが、見出しやキャッチコピーに使うことでかなりインパクトを出せるのではないでしょうか。

 

【Lobster】

https://fonts.google.com/specimen/Lobster

便利に使えるグーグルフォントのオススメ書体まとめ

アメリカンな雰囲気を感じるスクリプト系のフォントです。ポップで楽しそうなデザインを表現したい場合に便利です。イラストとの相性も良さそうですね。レストランバーなどの飲食店に使われるイメージがあります。

 

【Great Vibes】

https://fonts.google.com/specimen/Great+Vibes

便利に使えるグーグルフォントのオススメ書体まとめ

続けてスクリプト書体のフォントになります。こちらはスクリプト書体の中でも上品で軽やかな印象があり、女性向けのカジュアルなデザインに使えるのではないでしょうか。この書体を使うだけで特徴的な世界観を表現できそうですね。

 

【Dancing Script】

https://fonts.google.com/specimen/Dancing+Script

便利に使えるグーグルフォントのオススメ書体まとめ

こちらもスクリプト書体ですが、先ほどの2つと比べて比較的ベーシックな形をしており、クセがないため手軽に使うことができます。ちょっとしたアクセントに採用したい場合に便利なフォントです。

 

【Shadows Into Light】

https://fonts.google.com/specimen/Shadows+Into+Light

便利に使えるグーグルフォントのオススメ書体まとめ

見た目がかなり特徴的なハンドライト系の書体です。どこかユルく可愛さを感じられるデザインで、デザインの世界観を簡単に表現できるのではないでしょうか。カジュアル系のデザインに使えそうですね。

 

和文書体でオススメのグーグルフォント

グーグルフォントには欧文書体だけでなく、和文書体も用意されています。フォントベンダーが提供している有料のサービスと比較すると充実度は低いかもしれませんが、十分デザインに使えるフォントが揃っています。

【Google Fonts + 日本語】
https://googlefonts.github.io/japanese/

便利に使えるグーグルフォントのオススメ書体まとめ

 

【Noto Sans JP(源ノ角ゴシック)】

https://fonts.google.com/specimen/Noto+Sans+JP

便利に使えるグーグルフォントのオススメ書体まとめ

ベーシックな形のゴシック体で、ボディテキストから見出し、キャッチコピーまで幅広く使えます。ボディフォントなどでよく使われるヒラギノ角ゴシックや游ゴシックと比べるとモダンな印象があります。コーポレートサイト案件などで洗練された印象を出したい時には有効ではないでしょうか。グーグルフォントでは「Noto Sans JP」となっていますが、ディスプレイフォントなどで使われる場合には「源ノ角ゴシック」で扱われることもあります。

 

【Noto Serif JP(源ノ明朝)】

https://googlefonts.github.io/japanese/#notosansjapanese

便利に使えるグーグルフォントのオススメ書体まとめ

先ほどのNoto Sans JPの明朝体になり、こちらも汎用性のある使いやすいフォントです。明朝体は環境ごとに用意されているフォントがまちまちになるので、明朝体を使う箇所が多い場合にはこのフォントを採用した方が良さそうですね。こちらもグーグルフォントでは「Noto Serif JP」となっていますが、ディスプレイフォントなどで使われる場合には「源ノ明朝」名称が変わることもあるようです。

 

【M PLUS 1p】

https://fonts.google.com/specimen/M+PLUS+1p

便利に使えるグーグルフォントのオススメ書体まとめ

読みやすいデザインに整えられた、モダン系ゴシック体のフォントです。ウエイトもたくさん揃っており、細字〜レギュラー書体はボディテキストに、太字は見出しやキャッチコピーに使えます。普通のゴシック体と比べてインパクトを出せますが、チープな印象を感じられることもあるので、使いどころは気をつけたほうが良さそうですね。

 

【M PLUS Rounded 1c】

https://fonts.google.com/specimen/M+PLUS+Rounded+1c

便利に使えるグーグルフォントのオススメ書体まとめ

先ほどのM PLUS 1pを丸ゴシック体にしたものになります。太字で使うとかなりポップな雰囲気になります。使用できるデザインは限られるかもしれませんが、可愛い系や、カジュアルポップな雰囲気にはマッチしそうですね。

 

【さわらびゴシック】

https://fonts.google.com/specimen/Sawarabi+Gothict

便利に使えるグーグルフォントのオススメ書体まとめ

形としてはベーシックなゴシック体になりますが、どこか懐かしく温かみを感じられる書体です。Noto Serif JPだと冷たい印象になる場合にはこちらのフォントを使うと良いのではないでしょうか。ウエイトは今のところ一つだけなので、太字などを使う場合には他のフォントと併用する形になりそうですね。

 

【さわらび明朝】

https://fonts.google.com/specimen/Sawarabi+Mincho

便利に使えるグーグルフォントのオススメ書体まとめ

こちらもさわらびゴシックと同じく、温かみを感じられる明朝体になっています。キャッチコピーなどに使うとより感情が伝わるデザインに仕上がりそうですね。縦書きのデザインで使ってみたいフォントですね。

 

【はんなり明朝】

https://googlefonts.github.io/japanese/#hannari

便利に使えるグーグルフォントのオススメ書体まとめ

フリーフォントでも有名なので使ったことのある人も多いのではないでしょうか。ディスプレイフォントとしてでなくCDNのウェブフォントでも使えるようになったので、デザインの幅も広がりますね。形はオールド系の明朝体で、上品で柔らかな印象を与えることができるので、女性向けのデザインでもよく使われています。

 


 

今回はグーグルフォントについて、使いやすくて人気のオススメ書体についてまとめてみました。初めて使う方は是非参考にしてみてはいかがでしょうか。よく使う方も覚えておくと便利なので是非ブックマークしてくれると嬉しいですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?