游ゴシック体がWindowsで擦れる時のフォントファミリーの設定方法

ブログのフォントファミリーに「游ゴシック体」を使いたいと設定していたのですが、どうも、Windows の Chrome や Edge で閲覧すると文字が擦れて読みにくいので、対処法について考察してみました。

游ゴシックとは

游ゴシックは比較的新しいフォントで、Mac10.9、Windows8.1から採用されているスタイリッシュな印象の書体です。

特徴としては

『長文でも読みやすい』をコンセプトに、宇游工房さんによって作られたフォントで、他のゴシック体のようにゴツゴツした印象がなく、洗練されたフォントデザインが素敵です。

ちなみに、宇游工房さんが作ったフォントにはヒラギノや游明朝体などもあります。

ですが、Windows のブラウザで表示されたサイトを確認してみると、文字が擦れて文章が読みにくく感じます。

Windows の Chrome や Edge で文字が見にくい原因を調べてみたところ、どうやらフォントの太さがブラウザによって違うのが原因のようです。

Windowsの場合、標準搭載されているのは游ゴシックのLight（細字）、Regular（標準）、Medium（中字）、Bold（太字）ですが、一方、Macに搭載されているのはMedium（中字）とBold（太字）というやや太めの2種類だけです。

WEBサイトのフォントの太さは、CSSだとnormalやboldであらわされますが、数字でも設定することができます。

CSSで太さの指定をしていない場合、Windows だと400で表示され、Mac の場合500で表示されるのですから、Windowsだと細く表示されているように感じるのですね。

フォントファミリーについて少し復習しておきます。

フォントファミリーを書く時のルール

游ゴシックのフォントファミリー固有名称

以上を踏まえてフォントファミリーを設定してみます。

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

まず、Macで游ゴシックを表示させるために、"游ゴシック体", "YuGothic"としてします。

次に、Windows で字が擦れないように "游ゴシック Medium", "Yu Gothic Medium"を設定します。こうすることで、WindowsにはMediumの500が適用されるので、文字が擦れなくなります。

もし、Mediumがフォントに入っていない可能性があるかもしれないので、一応普通の太さの "游ゴシック", "Yu Gothic"も念のため書いておきます。

これでうまくいくと思ったのですが、MacOSの游ゴシックは現在追加ダウンロードのフォント扱いとなっていて標準では搭載されていないとのこと。

↓以前は標準で入っていたようなのですが、現在はダウンロードフォントになっています。

MacOSのフォントを何にするのか再考しなければいけません。

追記：OSによってデフォルトで入っているのと入っていないのがあるようで、Macではないのでよくわかりません。どなたか教えていただけると嬉しいです。

の一覧には游ゴシック体が掲載されているんですけどね。

さらに、游ゴシックをすべての端末から見て使えるようにしたかったのですが、iOS と Android では現段階(2022/10月現在) は非対応となっています。

游ゴシックを iOS と Android にも表示させたい場合は、有料のWebフォント "YuGothicPr6NM" があるようですが、おそらく企業向けではないでしょうか。

また、別の WEBフォントを使うということも考えたのですが、 WEBフォントはどうしても重くなりがちで、特に日本語は情報量が多いのでサイトが重くなってしまいがちです。

WEBフォントはロゴの部分や英字のところだけにすることを推奨しているWEBデザイナーさんが多いように見受けられます。

 "游ゴシック Medium", "Yu Gothic Medium"