たくなくの雑記帳

思ったことを書き留める雑記帳

Webフォントを色々読み込ませて遊ぶ

Webコンテンツの救世主:Webフォント

ブログを書いていて、ちょいちょいフォントのことが気になることがあります🤔
とはいえ厄介なのは、利用端末によってはプリインストールフォントが違っているために、表示される見た目に差が出てしまうことです。
Windows/Macでの問題は、かつてメイリオがどうだとか、ヒラギノ角ゴがどうだとかの戦争があったようですが、游ゴシックが標準搭載されたことでずいぶん沈静化された印象を受けます。
 
ただ、Android/iOSスマホ端末となればまだまだ戦争の色が強く、未だに両環境で共通的に使える妥当なフォントは見出されていないらしいです。

しかし、しかしながら昨今スマホ媒体を無視することはできず、かつスマホからのアクセスはマーケティング的にもかなりの割合を占めるため、適当に扱うこともできません。

そんなこともあり、端末にあるフォントをうまく使うことを諦め、「フォントがなければダウンロードさせればいいじゃない」とWebフォントの技術が登場したわけです。便利ですね。
ただ都度フォントをダウンロードさせるため、ページ読み込みが遅くなるという点で実用性は低いです😇(棒)
 
普段は面倒なのでサイト一括にCSSを適用していますが、今回はボックスごとにフォントを変えて色々遊んでみたいと思います。
普段は見たままモードでしか書いていませんが、今回はHTMLモードでゴリゴリ書きました🙄

Google Fonts

必要に応じてフォントをダウンロードして表示させる場合、なんだかんだGoogle Fontsが一番手軽で使いやすいです。

モリサワTypeSquareや、AdobeAdobe Fontsなどもありますが、会員登録をした上で数個に限り無料で利用できるものなので、気まぐれにコピって使えるような気軽さがなく、特にこだわりがなければ、まぁGoogle Fonts一択になりそうな気がします。

Google Fontsにおける日本語フォント

2021年1月現在、Google Fontsにおいて利用可能な日本語フォントは以下の11種類がありました。これくらいなら全部見られますね。

まず、ゴシック系が6種類。角ゴシックと丸ゴシックがあります。

  • Noto Sans JP
  • Sawarabi Gothic
  • M PLUS 1p
  • M PLUS Rounded 1c
  • Kosugi
  • Kosugi Maru

次に明朝系が2種類。

  • Noto Serif JP
  • Sawarabi Mincho

最後に、その他。エモーショナルなものが3種類。

  • Yusei Magic
  • Potta One
  • Hachi Maru Pop

というわけで、フォントを変えて同じ文章をみてみましょう。フォントは大きめにしてあります。

サンプル比較

サンプルにする文章はこれにしました。

PCであればサイト全体に設定した游明朝で見えていると思われます。スマホは機種にもよりますが、多分救済用に設定したNoto Serif JPの明朝が見えているパターンが多いと思われます。

山月記より

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

何かいい文章はないかと思って考えて、なんとなく思い浮かんだのが山月記でした。その中から最後の一節をチョイス。特に他意はないのでイチオシの文章があったらぜひ教えてください。

ちなみに、フォント比較では同じ文章を使って特徴を示しますが、一般的には各社こんなフレーズでフォントをアピールするらしいです。日本語だと文字種が多いのであまり網羅的な感じがせず、ユーモアとの戦いですかね。

ゴシック系

まずはベーシックなゴシック系から。これといって情報に感情が備わらず、単に事実を伝えるのに向いていると言われます。

なのでお金を扱っているメインブログでは游ゴシックにして客観性を演出しているつもり。

Noto Sans JP
Noto Sans JP

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

まず最初にNoto Sans JPです。

他のフォントと比べてみても、1文字1文字が大きく見える。フォントウェイト(太さ)も変えていないものの、太くしっかり見えるところに特徴があります。

ちなみに、このNotoフォントはGoogleが開発したフォントで、「No more Tofu」の略でNotoだそうです。
何かというと、英字限定フォントで日本語表示させると未対応ってことで みたいなのが出ます。んで、これを日本では豆腐(Tofu)と呼んでたので、

 

「もう豆腐は表示させない!(ノーモア豆腐!)」

 

って意気込みでGoogleが作ったユニバーサルなフォントです。

コンピュータ上で扱える文字はUnicodeで規定されていますが、このNotoシリーズはその全て800言語11万文字以上をカバーしているようです。すごい。

なので、このNotoフォントをWebフォントとして指定しておけば、どんなデバイスから見ても、どの言語圏から見ても同じ表記に見えるというわけです。

Sawarabi Gothic
Sawarabi Gothic

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

先ほどのNoto Sans JPに比べてみれば1文字が小さく、マイルドに見えるような気がします。文字が小さく文字間に余裕があるために、文章としてなんとなく落ち着いた感じがありますね。

M PLUS 1p
M PLUS 1p

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

M PLUSは今回紹介するフォントの中では最も大きく見えるフォントです。「間」など、四角く構える文字をみると目一杯スペースを使っているのがよくわかると思います。

ちなみにいくつかあるM PLUSフォントのうち、「p」「c」はプロポーショナルフォントにあたります。プロポーショナルフォントとは、文字ごとの幅を柔軟にデザインし、より美しく見えるようにしているフォントのことです。対になるのが等幅(monospace)フォントで、M PLUSフォントだと「m」「mn」がそれにあたりますが現時点で提供はないようです。

プロポーショナルと等幅は結構な違いになりますが、Google Fontsに登録されている日本語フォントは全てプロポーショナルフォントだったので、対になっているフォントを並べてみましょう。

Roboto

The quick brown fox jumps over the lazy dog.

Roboto mono

The quick brown fox jumps over the lazy dog.

ってことで、随分印象が変わることがわかります。構成によっては文字配置を揃えたくなることもあると思うので、意図的に等幅を使うこともあると思いますが、基本的にはプロポーショナルフォントのほうが見やすくなるとは思います。

ちなみに、上の文章はアルファベットの代表的なパングラムで35文字の短文にも関わらず、26文字のアルファベットが全て使われています。そのため、よくアルファベットフォントの例文に使われるようです。
日本語は漢字含めるとパングラム化は不可能だと思いますが、ひらがなだけであれば「いろはにほへと~」のいろは歌がパングラムにあたりますね。

M PLUS Rounded 1c
M PLUS Rounded 1c

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

違うような...違わないような...。確かに文字の角はわずかながら取れていますね。

白・月・思あたりの角を見るとわかりやすいです。

Kosugi
Kosugi

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

再びこちらはNoto Sans JPっぽい角ゴシックです。線も太め。圧を感じます。

Kosugi Maru
Kosugi Maru

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

こちらは丸ゴシックですが、先ほどのKosugiと比べると1本1本の線のエッジまで丸くなっていることがわかります。教科書っぽいイメージ。

明朝系

ここから明朝です。格式高い感じ。エモい文にも向いているので、この雑記ブログのデフォルトは游明朝にしています(キリッ

Noto Serif JP
Noto Serif JP

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

いかにも文学的な感じがします。フォントが変わっただけですが。
Noto Sans JPと同じく、線がしっかりしていて大きくはっきり見えますね。

Sawarabi Mincho
Sawarabi Mincho

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

こちらも文字は大きく見えますが、線の太さは少し控えめに見えます。
なんとなく曲線の使い方に特徴があり、流れるような運筆を連想させる。「り」とかなかなか美しい。

ただ、「忽」「咆哮」「叢」のフォントがないようなので救済で設定した serif フォントで代替されていることがわかります。日記レベルで常用外漢字を使うことはないと思いますが、一応日本語フォントではこういう悩みもあるといういい例ですね。

その他

ここからはずいぶん違う世界になります。

Yusei Magic
Yusei Magic

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

たしかに油性マジックっぽいですね(小並感)

心なしか虎のイメージもやわらかくなった気がします。ワオーン🐱

 Potta One
Potta One

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

 なんというか、味のあるフォント。意外と好きです。たまにこういう感じの字を書ける人いますよね。上手いというか丁寧な感じの人。

Hachi Maru Pop
Hachi Maru Pop

一行が丘の上についた時、彼等は、言われた通りに振返って、先程の林間の草地を眺めた。忽ち、一匹の虎が草の茂みから道の上に躍り出たのを彼等は見た。虎は、既に白く光を失った月を仰いで、二声三声咆哮したかと思うと、又、元の叢に躍り入って、再びその姿を見なかった。

これはもう、内容以前に

 

李徴と袁傪ゎ...ズッ友だょ...!!

 

って感じがプンプンします。これがフォントの力です。

 

<ええー、フォントにー?
<うんうん、もじもじ

 

って感じです。ボケが伝わらなかったらごめんなさい😇

フォントは偉大

はてブロでこれをやるのはとても面倒でしたが、やはりフォントを並べてみると楽しいですね。

字が上手い人はそれだけで信頼感高いとかそんな言説がありますが、こうやって見てみると申し訳ないがそんな気がします。

文字は大事にしましょう🙄

あと、フォントに興味を持ったそこのアナタ、ぜひフォントかるたクンフーを高めていってください。やってるときだけ絶対フォント感が身に付く...そんな気持ちになれます。

フォントかるた

フォントかるた

  • メディア: