Google Fontsで早期アクセスとして提供されていた日本語ウェブフォントの、正式サポートが始まりました。全部で8種類あるのですが、それぞれのフォントの特徴などを紹介したいと思います。

フォントの紹介

Noto Sans JP

GoogleとAdobe が共同開発しているフォントファミリー。コンセプトがフォントセットにない文字を使う時に表示される豆腐文字を撲滅すべく作られたシリーズで、名称のNotoも「no more tofu」からきています。

Noto Sans JP はうろこのないゴシック体で、欧文フォントでいうサンセリフです。（ただしゴシック体のことをサンセリフ体とするのは日本においてであり、本来ゴシック体はブラックレターのことを指します。）

Noto Serif JP

上記のシリーズでこちらはうろこのある明朝体になります。欧文フォントだとセリフといいます。

Sawarabi Gothic

フリーなライセンスで提供されている日本語フォント「さわらびフォント」のゴシック体です。さわらびフォントは落ち着きのあるクラシックな印象があり、スリムな造形は優雅さがありますね。

このフォントは公式サイトで網羅している漢字の割合をグラフで見ることができます。
さわらびフォント

Sawarabi Mincho

上記フォントの明朝体です。さわらびの明朝体はゴシック体よりも更に気品さが増していて西洋の伝統のような重厚感があります。

M PLUS 1p

M PLUSフォントはほとんどの漢字を網羅しつつそれ以外に欧文用文字や記号、演算子や特殊文字を揃え更にウェイトも幅広く揃えている非常に優秀なフリーフォントです。
M PLUSフォントには1p以外にも2PやCといった物もあるのですが、グーグルフォントで採用されたのはこの1pと次に説明するRouded 1cの2種類です。

特徴としては少し可愛らしさがあり、読み手にやわらかい印象を与えるユニークなフォントです。

ひらがなの「あ」や「ほ」は突き抜けるところが突き抜けていなかったり、「き」や「な」や「ふ」は離れている点と線がくっついてるなど、デザインを見ているだけでも楽しいフォントです。

M PLUS Rounded 1c

上記のフォントをベースとして、角を丸くしたのがこのフォントです。そのため上記のフォントよりも優しい印象を与える事ができます。

Kosugi

1950年代のデザインにもとづいたような作りで、美しさと可読性をかね揃えたシンプルで読みやすいゴシック体のフォントです。

Kosugi Maru

上記フォントに丸みをくわえたフォントです。8つのフォントの中で一番丸みがあるため一番かわいらしい印象を与えてくれます。

フォントを読み込む

サイトで利用する場合は以下の手順となります。

利用したいフォントにある＋マークをクリック。

下部に出てくる Family Selected メニューをクリックしてメニューを展開。

ページ下部にメニューが出現するので開き CUSTOMIZE をクリック。

Japanese をクリックして有効にして

EMBED に戻り、HTMLのhead内に下記を記述。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

CSSには下記を記述

font-family: 'Noto Sans JP', sans-serif;

CSSのみで作成する場合は @IMPORT を選んで下記をCSSに記述。

<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
</style>

font-family: 'Noto Sans JP', sans-serif;

まとめ

今回Googleフォントで採用された 「Noto」「 Sawarabi」 「M PLUS」「Kosugi」はそれぞれ違った印象を与えてくれるフォントで、利用するサイトのデザインによって取捨選択できるのはすごくよいですね。

ウェブフォントを利用することで、ブラウザに表示される文章の可読性・視認性が向上し、画像で表現していた見出しなどを文字で表現できるため、アクセシビリティの改善につながります。

その結果、ウェブサイトを利用したブランディングの底上げがしやすくなります。

今回紹介したのは Googleフォントの8種類ですが、Adobe の Typekit やモリサワの TypeSquare、ソフトバンク・テクノロジーの FONTPLUS などもっとたくさんウェブフォントを提供しているサービスがあるのでぜひこれらも取り入れてどんどんウェブフォントを採用していきましょう。

個人的に愛してやまない丸明オールドが利用できる FONTPLUS はすごくオススメです。

お役に立てたらお願いします🙇