ワイヤード・パンチ

サイトタイトル変えたい…。もうメカメカしいの関係なくなった…。

游ゴシックは見づらいので使うのをやめ、Noto Sansに変更しました。

2018年6月14日

当サイトでは何日か前まで、フォントに游ゴシックを使用していました。

一方で、とあるアプリのフォントが一時的にメイリオから游ゴシックに変わっていたこともありました。

その際に身内から「游ゴシック見にくいわ」って言われてしまったので、当サイトで游ゴシックを使い続けるべきか、考えてみることに。

広告

游ゴシックとメイリオの比較。

上の写真は、当サイトで游ゴシックが使われていたころの様子です。

Windows8まではメイリオがUIの標準フォントでしたが、Windows10からは游ゴシックが標準となりました。

メイリオと比べると細いフォントになっています。

一方でこちらは、メイリオに切り替えた現在の当サイトです。

この2つを比べてはっきりわかったことは、細いフォントは長文になると読むのに疲れるということ。

個人差はあるかもしれませんが、細いフォントを見ていると、どうも目に力が入ってしまうような感じがします。

普段、ブログの記事はサイト上ではなくテキストエディタで書いており、そこで使っているフォントは游ゴシックではありません。

サイト上に公開したあとも、間違いがないかザッと確認するくらいですから、游ゴシックになっている自分の記事の欠点に、なかなか気づけずにいました。

そもそもなぜ游ゴシックを使っていた?

Windowsで標準搭載されているフォントはメイリオであるのに対して、Macで標準搭載されているフォントはヒラギノです。

つまり、ほとんどのWindowsではヒラギノは表示できず、Macではメイリオが表示できません。

そのうえ、メイリオとヒラギノは別物であるため、当然見た目も異なってきます。

一方で游ゴシックは、Windows10と最新のMacともに標準搭載されています。

(Macには詳しくないので、最新のバージョンの名前はわかりません…。)

つまり、WindowsとMacどちらでも使える、数少ないフォントとなります

OSの違いによるフォントの違いがなくなり、どちらのOSでも全く同じデザインのサイトを表示させられます。

そもそもフォント統一のことをツッコむと、LinuxやAndroidやiOSも含めた場合、游ゴシックでは統一できません

さすがに、すべてのOSに標準搭載されているフォントというのは、存在しないでしょう。

むしろフォント指定はいらない?

font-familyによるフォントの指定をやめて、ユーザにフォント指定を委ねるべき、という記事を見かけたこともありました。

サイト管理者がフォントを押し付けるより、ユーザが見たいフォントで見せた方が、ユーザフレンドリーだということ。

ということで、一時的にfont-familyを、sans-serifだけにしていたときもありました。

この場合、ブラウザで設定しているゴシック体が使われることになります。

たとえば、もう誰も今どき使わないでしょうけど、MSゴシックを設定していたら、sans-serifになってるサイトではMSゴシックで表示されるということに。

でも、ブラウザのフォント設定をわざわざ変えるユーザなんて、あんまりいないのではないでしょうか。

私自身、ブラウザ設定からフォントを変えてたのは、OSが移り変わり、MSゴシックとメイリオがまだ混在してたような時代だけです。

全環境で同じかつ、誰もが満足行くWebフォントで万事解決。

WindowsとMacに対応している游ゴシックは嫌われ者で、なおかつ使ったところでスマホには未対応。

かといって、無指定にしてもわざわざ自分から設定するようなユーザはいない。

Google Fonts + Japanese • Google Fonts + 日本語

というわけで、上記のサイトからWebフォント「Noto Sans」をリンクさせて、当サイトに適用することにしました。

Webフォントを利用しても読み込みが遅くなるようなことはありませんでしたし、Noto Sansなら誰も文句言わないほど視認性にもデザイン性にも優れたフォントなので、選ばない手はありません。

Webフォントなので、読み込みに若干のラグは発生するものの、ページを完全に開き切るまでに支障を来たすほど、致命的に遅いわけでもありませんでした。

なお、headタグに直接cssを入れるのではなく、Wordpressの場合ならfunctions.phpに下記のように追記すればいいでしょう。

add_action("wp_enqueue_scripts", function() {
	wp_enqueue_style("noto_sans", "https://fonts.googleapis.com/css?family=Noto+Sans+JP");
});

ちなみに、メイリオとNoto Sansを比較すると、下記のような感じになります。

まずはメイリオ。

次にNoto Sans。

こちらの方がすっきりして見えますね。メイリオよりも視認性に優れたフォントがあったなんて。

追記。(2019/1/6)

以前はフォント無指定のくだりが長く、今はNoto sansに変えたので、記事本文およびタイトルを修正しました。