おすすめ標準フォント 游ゴシック（Yu Gothic）をWebサイトで使う？それともGoogleのNoto Sans JPか？

よこのじ（@yokonoji_work）です。

Webサイトの表示フォントにGoogleのNoto Sans JPを使うことが多いのですが、日本語が含まれるフォントは読み込みに時間がかかる点が少し気になっていました。

そこで、WindowsとMacに共通して標準搭載されている游ゴシック（Yu Gothic）の使用を検討しましたので、違いや注意点をまとめておきます。

結論としては、自分の中ではNoto Sans JP優勢という結果なのですが、游ゴシック（Yu Gothic）は検討するに値する素晴らしいフォントだと思いますので、ぜひ読んでみてください。

標準フォント 游ゴシック（Yu Gothic）について

游ゴシック（Yu Gothic）は、Windows 8.1とMac OS 10.9から標準搭載されているフォントです。

cssでfont-familyとして指定する場合は次のように記述します。

font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;

似たような記述があるのはOSにより対応するフォント名が異なるためです。

• Windows：”游ゴシック” , “Yu Gothic”
• Mac：”游ゴシック体” , YuGothic

フォント名にスペースが含まれる場合と日本語名の場合には、シングルクォーテーション（’）かダブルクォーテーション（”）で囲む必要があります。

クォーテーションなしでも問題ない？のかもしれませんが、クォーテーションがあることで悪さをすることはないようですので、とりあえず付けておけば大丈夫でしょう。

font-familyプロパティにクォーテーションは必要？

最後尾のsans-serifはゴシック体のいずれかのフォントを当てるように指示するものです。游ゴシックが入っていない場合はこれが適用されますので、必ずsans-serifの記述入れておきましょう。

游ゴシック（Yu Gothic）の font-weight 調整

游ゴシックを使用するとき、WindowsとMacで見た目が違うことがよく問題として挙げられます。

Webフォントを利用せずにOSによる見た目の違いをなくすことを期待しているはずなので、当然ですね。

こちらは、Windowsで游ゴシックを表示させたものです。上はGoogle Chrome、下はInternet Explorerです。ブラウザによっても少し違いがあるようです。

Macは持っていないのですが、Macの游ゴシックはこのように表示されるようです。

游ゴシックや游明朝を CSS で指定する時の注意

WindowsとMacを比べると、Macの方が美しく表示されているように見えます。この違いは、OSに用意されているフォントの太さの違いによります。

• Windows：Light、Regular、Medium、Bold
• Mac：Medium、Bold

具体的には、font-weightの指定がない場合にWindowsではRegularが使用されて、MacではMediumが使用されるようです。このため、Windowsの方が細く表示されています。

よって、WindowsもMediumで表示させるために、cssのfont-weightで500を設定してあげる必要があります。

font-weight: 500;

こちらはGoogle Chromeで表示させたものです。上から、游ゴシック400, 游ゴシック500, そして、3つ目は比較用のNoto Sans JP400です。

Windowsでの游ゴシックはfont-weight 500だと視認性が良い太さだと感じますね。これでWindowsでもMacでも同じように表示されることとなります。

游ゴシック（Yu Gothic）の使用を検討したまとめ

游ゴシックを検討してみましたが、結論としてはGoogle fontsの「Noto Sans JP」を使用したいなと思いました。

游ゴシックを使えば、確かにWindowsとMacで見た目を揃えることができます。

しかし、Windows 8.1とMac OS 10.9以降という条件があります。また、その他のバージョンではどうするか？スマートフォンやタブレットではどのように表示されるか？ということも考えなくてはいけません。

これは細かく調整していくと、かなり労力がかかることです。

対して、WebフォントであるGoogle fontsを利用すれば、細かな調整なしにあらゆるデバイスで同じように表示できます。

ユーザーとしても、パソコンでもスマホでも同じように見えるというのは安心感があるかと思いますので、そういったことを考えると、WebフォントであるGoogle fontsを積極的に使おうという結論に達しました。

注目記事：CSSによるフォントサイズの指定 px,pt,ex,em,rem,vw などの違いと使い方

[itemlink post_id=”3028″]

[toggle title=”参考サイト”]

[/toggle]