Web制作を行う全ての方へ

Google Fontsが正式サポートを開始した日本語ウェブフォント8種類それぞれの特徴と使い方

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

フォントの紹介

Noto Sans JP

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

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

Noto Serif JP

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

Sawarabi Gothic

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

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

Sawarabi Mincho

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

M PLUS 1p

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

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

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

M PLUS Rounded 1c

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

Kosugi

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

Kosugi Maru

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

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

0123456789

フォントを読み込む

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

 

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

 

下部に出てくる 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 はすごくオススメです。

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

Kyashで送金する

Ad



Share