この記事はパソコンで表示される文字（字体）の話。スマホは対象外。
これまでウェブサイトには美しさよりも「明瞭」さを優先してメイリオを使ってきた。しかし、パソコンで表示した場合、文字が綺麗に揃わない、全体が雑な印象になるなど不満がいっぱい。 たとえば、 川沿いに歩く。その先は断崖。これは危険。⇐ 文字の縦位置と大きさがバラバラ。 当世これが常識なのか。⇐ 行のベースラインが一直線にならない。 もう一つ欲しいな。⇐ "一" が上にずれる。 ときには１ピクセル上げたり下げたりサイズを調整したり、画像で置き換えたりもしていた。もっとも嫌だったのは、これを回避するために文章を変えなければならなかったこと。 もうこんなこととはオサラバしたいと、他のフォントセットに変えてみることにした。美しい・収蔵字数が豊富・無料・安全が条件。そうなると Google Fonts しかないだろう。Adobe には色々な問題がある。Google Fonts の中のすべての日本語ゴシック体を試してみた。明朝体は使わない。 あれこれ試して残ったのは Roboto + M PLUS 2 Light 300 と IBM Plex Sans JP Regular 400。どちらも百点満点とは言えないけれど、日本語表示はメイリオよりずっとマシだろう。 なお、文字の位置が微妙に変わってくるため、ボタンラベルなどの余白調整が必要になる。CSS ファイルで @import を使うと読み込みが遅くなるので非推奨とのことだが、体感的には問題ないように思える。 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@300&display=swap'); body {font-family: 'Roboto', 'M PLUS 2', sans-serif; }