ふぉんとーく　#5　Google Fonts篇

Tobilog-Selection

・Laravel 8にてenvファイルが反映されない場合の対処法
・現代錯誤　吾輩はトビウオである。名前はトビログ。
・久々の鉄道模型　SBB 簡易寝台車

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

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

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

GoogleフォントはWebフォントとして使える
Noto Sans
しっぽり明朝
コミックレゲエ
おわりに

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

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

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

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

という箇所は、

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

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

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

Noto Sans

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

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フォントとしてではなく、フォントをローカルに保存してポスターの文字入れに使うのもおすすめです。