【Webフォント】Google Fonts にある丸ゴシック系の書体についてまとめてみた!

2021年6月14日WebWebフォント,フォント,Google Fonts

マークアップエンジニアのアシュリーです!

最近Google Fontsの日本語対応フォントが増えすぎて、どんなフォントがあったか全然覚えられません!

とりあえず今回は、丸ゴシック系の書体についてまとめてご紹介したいと思います!

今回ご紹介するフォントは
「キウイ丸」「Rounded M+」「小杉丸ゴシック(モトヤマルベリ)」

キウイ丸
Rounded M+
小杉丸ゴシック(モトヤマルベリ)

キウイ丸 (Kiwi Maru)

マメロンというフォントをベースにして作成された丸みのあるフォントです。
この記事では丸ゴシック系としてご紹介していますが、手書き風と丸ゴシックの間くらいの形をしています。

参考:https://github.com/Kiwi-KawagotoKajiru/Kiwi-Maru

Google Fontsにある日本語丸ゴシック体の中では、比較的仮名の仮想ボディが小さめなので、文字の形がやや個性的であることに目をつぶれば、モリサワの秀英丸ゴシックやフォントワークスの筑紫A丸ゴシックを使いたいようなシチュエーションで、使えるかもしれないフリーのWebフォントです!

使えるウェイトは3種類。ただし細め

Kiwi Maruはうれしい3ウェイトが提供されていますが、残念ながらもっとも太いものでMedium 500とやや細めです。
大きい文字サイズで見れば特に問題はないですが、小さい文字サイズで見てみると細さが際立ちますね。

クセが強めのフォントなので、小さい文字サイズだと見づらい

小さい文字サイズでも使うことはできますが、形のクセが強めなので本文書体に使うのは難しいかもしれません。

Rounded M+ 1c (M PLUS Rounded 1c)

M+ OUTLINE FONTS というオープンソースのフォントをベースにして、作成された丸ゴシック体です。

M+の派生の丸ゴシックは複数あり、Google Fontsに登録されているものはおそらく「自家製Rounded M+」の1c かと思います。

1cというのはM+の文字のデザインの種類の1つで、仮名のふところが大きくて欧文がやや丸いものを指しています。

参考:http://jikasei.me/font/rounded-mplus/about.html#1c2p_9

懐が広くて、仮名の仮想ボディが大きめなので、モリサワの新丸ゴを使いたいようなシチュエーションで使えるフリーのWebフォントです!

使えるウェイトが多いのが良い!

M+シリーズはとにかく使えるウェイト(太さ)の種類が多いのが魅力です!

この記事でご紹介する丸ゴシックの中で最もウェイトが多い7種類が提供されているので、使いやすくてよいですね。

とはいえ、1サイト内で使うWebフォントのウェイトは1~3種類程度にするのが、制作工数的にも、Webフォントの読み込み容量的にもおすすめです。

小さい文字サイズでの利用には難あり(Windowsの場合)

M PLUS Rounded 1cは20px以下で使うと文字がジャギる(文字のふちがギザギザになる)ので、22px以上の見出し系のテキストのみに使う方が良いでしょう。

※特別な工夫をしてフチをぼかしてレンダリングすることもできるのですが、小さい文字での利用は避ける方が無難です。

※Macではスムーズにレンダリングできるようです…。

Windowsで確認すると、小さい文字がジャギる

小杉丸ゴシック/モトヤマルベリ(Kosugi Maru)

小杉丸ゴシックは、提供元にMOTOYAとある通りモトヤフォントの書体です。

もともとの名前はどうやら「モトヤマルベリ」のようなのですが、Google Fontsでは小杉丸ゴシックとして登録されています。

M PLUS Rounded 1cと比べるとすっきりとした印象が特徴で、仮名の印象はモリサワのヒラギノUD丸ゴTBUD丸ゴシックのような雰囲気をもつかわいらしいフォントです。
※UD書体ではないです。

提供されているウェイトが少ない

Kosugi Maru として提供されているウェイトはなんとRegular 400のみ!

font-weight:boldを書けば、ブラウザが一応無理やり太らせてはくれますが、フォントとしては太字の提供が無いので使いどころが限られそうです。

小さい文字サイズでもきれいに見える

提供されているウェイトが少なくて残念なKosugi Maruですが、今回ご紹介した3フォントの中で最も、小さい文字サイズの時に見やすいフォントになっています。

Posted by アシュリー