ふぉんとーく #5 Google Fonts篇

ふぉんとーくも早いところ第5回までやってきました。今回はGoogle Fontsについて!

筆者はWebサイトを制作しているので、Google Fontsにはお世話になっていました。フォントワークスのフォントの一部がGoogle Fontsに追加されたことや、最近個人的に「Google Fontsと言えばこのフォント」というフォント(後述します)にはまりかけていることから今回このテーマを設定しました。

本稿ではGoogle Fontsの中でも特に使い勝手が良い、ないしは明確と感じる日本語フォントをご紹介します。

GoogleフォントはWebフォントとして使える

Webフォントとはこの連載の第3回の「みんなのフォント」の項で軽く触れましたが、デバイス上ではなくサーバー上にあるフォントのことです。

従来は「デバイスフォント」すなわちデバイス内に保存されているフォントを指定して文字をサイト上に表示していました。それに対してWebフォントはそれぞれの端末がサーバーからフォントのデータを読み込んで表示します。そのため、どの端末から見ても同じフォントが表示されます。例えば、

端末内にあるセリフ体(≒明朝体)を指定しています
Noto Serifを指定しています
端末内にあるサンセリフ体(≒ゴシック体)を指定しています
Noto Sansを指定しています

という箇所は、

Windowsでの表示
iOS(iPhone)での表示

と、端末内にあるフォントを指定した部分についてはWindowsとiOSとで表示が異なり(Winは游でiOSはヒラギノ)、Noto SerifとNoto Sansを指定した部分についてはどちらの端末でも同じフォントが表示されています。

サーバーからフォントを読み込むのに際して、デバイスフォントを使う時と比べてサイトのデータが僅かながらに大きくなり、それによって僅かながら表示速度が遅くなるという弊害も生じます。しかし画像を読み込むよりかは遥かにデータ量が少なくて済むうえ、デバイスに入っているフォントに依存せずに表示ができることはサイトをデザインする際に大きなメリットとなります。

なお、Google Fonts内にあるフォントデータをローカルに保存できます。フォント選択画面の右上に表示される「Download Familiy」からダウンロードが可能です。

フォント選択画面のキャプチャ

Noto Sans

さっそく「Google Fonts」といえばこのフォントというフォントです。癖が少なく、読みやすい、いわば優等生のようなフォントです。多種多様な文字へのサポートと癖の少なさから、最近よくWebページに採用されています。

Google Fontsより引用

Google Fontsには6種類のウエイトのNoto Sansが用意されています。ThinやLightはかなり細いので、しなやかさやきめ細かさ、清潔感を演出できますし、Blackはかなりの太さを誇るのでフォントそのものの存在感が抜群で、文字が主役となる場面でも使用できます。ここまで癖のないフォントで、6種類のウエイトが全て無料で使えるのはNoto Sansぐらいです。なお、お気づきの方も多いでしょうが、この段落はNoto Sansを読み込んで表示しています。

このフォントは「No more tofu」という目標の元で開発されました。tofuとはコンピュータが表示できない文字があるときに、代わりに表示される小さな白い四角形を豆腐に見立てた呼称です。この豆腐を撲滅すべく、GoogleとAdobeが手を取り合って世界中の文字のサポートを目指して作成されたフォントこそがこの「Noto Sans」と「Noto serif」です。

そして、個人的にはインフォグラフィックスとの相性がとてつもなく高いと考えています。なおインフォグラフィックスとは情報を視覚的にわかりやすい形にまとめたものです。

▲インフォグラフィックスの例
これでわかる!新型コロナワクチン情報(https://medicalnote.jp/covid19-vaccine/)より引用

Noto Sansの可読性の高さと癖の少なさは図の分かりやすさに貢献すること間違いなしです。また、太いウエイトと細いウエイトを使いこなせれば、メリハリのあるグラフィックを作成できます。

そのうえ、Noto Sansを読み込んだWebサイトの中にNoto Sansを用いて作ったインフォグラフィックスを表示すれば、統一感が出て読者にとって更に分かりやすい情報提供が期待できます。

しっぽり明朝

高貴古典的な形をしている、オリティが非常に高い明朝体です。これがフリーフォントだなんて恐ろしい…しっぽり明朝としっぽり明朝B1の2バージョンに、それぞれ5種類のウエイトが用意されています。

【しっぽり明朝B1】
色はにほへど 散りぬるを 我が世たれぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず

しっぽり明朝|商用・同人誌利用可能フリーフォント
しっぽり明朝は、石井中明朝体OKLやリュウミ&#125...

なお、しっぽり明朝としっぽり明朝B1の違いは墨だまり(画の交差点の滲みのようなもの; 下図の「の」の始点部分が分かりやすいです)の有無です。

B1には墨だまりがある
https://fontdasu.com/shippori-mincho/より引用

可読性がとても高いわけではないので、個人的に、小説等の芸術性を追求した文章以外では本文に使うのはおすすめできないと考えています。しかしこのフォントの持つ雰囲気を活かし、アイキャッチにあたる部分や見出し等の文章量が多くないところに部分的に使用すると、サイトの重厚感を増させる効果が期待できます。また、このフォントは主役になる力が強いので、Webフォントとしてではなく、フォントをローカルに保存してポスターの文字入れに使うのもおすすめです。

コミックレゲエ

テレビのテロップでよく見る、人が怒っているときに使われるあの刺々しい楔形のフォントです。Google Fontsでは「Reggae One」表記での登録がなされています。

はぁ?
お前さ、少しは身の程を弁えるってことを覚えたほうがいいと思うよ?
うるさいなぁ!!

こんな感じで「怒り」を画像を使うことなくサイト上に表現できます。しかしこのフォントについては強い個性のトレードオフとして可読性がそこまで高くありません。それゆえWebフォントとして使用するよりも、ダウンロードして動画のテロップとして使う機会のほうが多そうです。

このフォントは第4回で軽く触れたフォントサブスクサービスLETSに含まれていて、無料での提供はされていなかったはずです。しかし、2021年1月からこのフォントを含むフォントワークスが開発した8フォントのGoogle Fontsへの提供が開始されました。

現時点(2021年3月16日)ではフォントワークスが開発したフォントはコミックレゲエのほかに
ドットゴシック16 Regular
ロックンロール One Regular
ステッキ Regular
の利用が可能です。この中だとドットゴシックがWebフォントとして最も使い勝手が良さそうです。

おわりに

本稿ではGoogle Fontsにある日本語フォントを紹介してきました。

Google Fontsには英語フォントをはじめとして日本語以外の文字のフォントがたくさんあります。どのフォントも上で紹介したのと同じ方法でダウンロードが可能なので是非活用してみてください!

次回もお楽しみに!

かもにく
かもにくと申します。好きなことを気ままに綴っていきます。普段はWebサイトを作ったりドラマを見たり...
文字と地図と文房具が好き。エンタメは鎮痛薬。

コメント

タイトルとURLをコピーしました