ajike switch

まずはこれを入れておけ!ダウンロードしておきたいオススメGoogle Fonts 10選

こんにちは、ハキリです。
ここ最近UXやグロースハック、スマホUIについてハイペースかつ真面目な記事が続いてますので、息抜きがてらオススメのGoogle fontsのご紹介をします!書体のバリエーションにお困りでしたらぜひ参考にしてみてくださいね。

RobotoやDroidシリーズ、Open sansといった紹介不要な著名なフォントは除いて、今回はサイトに組み込む以外のグラフィック表現にも使えそうなフォントを挙げてみました。そして挙げ出したらキリがない!ということで10個に厳選してご紹介していきます。それではどうぞ!

1. Asap

asap
https://www.google.com/fonts/specimen/Asap

FrutigerやDroid sansのように視認性に特化させたカーブが特徴的で(組んでみるとDINぽさもありますね)、角丸加工が今らしさを演出してますね。視認性の良さ&角丸の柔和な雰囲気は現代的なフラットデザインやモバイルを想定したデザインとも相性がよさそうです。

2.Bevan

bevan
https://www.google.com/fonts/specimen/Bevan

太めのエジプシャン書体です。海外でのディスプレイ表現では視認性の担保のためにセリフ(ウロコ=文字の端にある広がりの装飾、明朝体を想像してください)とゴシックを掛け合わせたスラブ〜エジプシャン書体が選ばれる機会が増えているそうです。そのせいかこの手の書体はどこか海外の雰囲気が漂っていますね。インターナショナルなサイト表現が求められたり、力強さや男らしさを象徴するようなスポーツ表現に向いていそうです。

3.Bitter

bitter
https://www.google.com/fonts/specimen/Bitter

こちらはスラブ書体になります。Bevanが見出し向けであればこちらは本文向けでしょうか。欧文のwebフォントとなると見出しでの出番が多いと思いますが、セリフのおかげか小さい表記でも視認性を保ちつつ装飾性にも優れているので、日本語のサイト設計でもアクセントとして用いることができそうです。

4.Codystar

codystar
https://www.google.com/fonts/specimen/Codystar

ファッション性に優れた書体ですね。若さやかわいらしさを求められている場面であれば簡単なロゴ表現としても使用できそうです。

5.Cutive Mono

cutive-mono
https://www.google.com/fonts/specimen/Cutive+Mono

一つは抑えておきたいタイプライター書体。サイトで直接使用する機会は少なそうですが(プログラミングの表現で出番があるかも?)、Codystar同様若さやかわいらしさを求められている場面で活躍しそうです。ちなみにMonoでない通常のフォントもありますが、細さやMonoの字間の雰囲気の良さから個人的にはMonoをオススメします! 場面によって使い分けてくださいね。

6.Fjalla One

fjalla-one
https://www.google.com/fonts/specimen/Fjalla+One

News Gothicを現代的&ディスプレイ向けに仕上げた感じ、とでも言うべきでしょうか。コンデンス(長体)気味なので多めの字数を入れたい時や、表現として字間アキ気味で組むと抜け感が出て良い雰囲気になります。この手の書体も持っていると便利ですね。Trade Gothic〜News Gothicらへんの代替になりそうなフォントですとOswaldPathway Gothic OneSix Caps(これはUnivers ultra condensed)も良さそうです。

7.Lato

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

ウエイトの豊富さが魅力のゴシック体、やはり角丸加工のゴシックは今の気分ですね。見出しから本文まで幅広く使え実用性に優れていると言えます。

8.Montserrat

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

最近海外のサイトで使われる機会が増えている(気がする)Montserrat、印象としてはGotham〜Avenirの代替品といった感じでしょうか。字面が正方形に近い形で骨格の安定感と可愛らしさが同居するデザインはGotham以降の流行を捉えたフォントと言えます。

9.Nunito

nunito
https://www.google.com/fonts/specimen/Nunito

Arial RoundedをDIN NEXT Rounded、VAG Roundedらへんに少し寄せたって感じでしょうか。丸文字フォントをネイティブに表示させるのは難しい場面も多いと思うので、webフォントとしての選択肢を持っているのも良いかと思います。

10.Libre Baskerville

libre-baskerville
https://www.google.com/fonts/specimen/Libre+Baskerville

最後に著名フォントを持ってきてしまいましたが、意外にご存知ない方も多いようですのでご紹介。Linotypeなどのメーカー製に比べると線のシャープさには欠けますが、使えるだけありがたいですね。

歴史ある名書体を使いこなしている方々からすると「詰めが甘いんだよなぁ…」と思うところもあると思いますが、まだまだディスプレイにモディファイされた書体の選択肢は多くなく、その意味ではGoogle Fontsはかなり優秀だと思っています。

こうやって並べてみるとUniversやHelveticaといった書体の変わりになりそうなものが見当たらないのも興味深いですね。webでの文字表現が更に発展していくことに期待しつつ、こちらの記事を参考していただければ幸いです。それではまた!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×