monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

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

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

游ゴシックとは

コントロールパネルより

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

特徴としては

  • ゴシックだけど角が鋭角でない
  • 他の書体よりもカーブの丸みが直線的
  • 文字と文字の間隔が狭い
  • 印刷してもきれいに読める
  • WindowsとMacの共有フォント

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

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

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

Windows の Chrome や Edge で文字が見にくい原因はフォントの太さ

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

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

Windows搭載 の游ゴシック

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

太さ名
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal (Regular)
500 Medium
600 Semi Bold (Demi Bold)
700 bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)
950 Extra Black (Ultra Black)

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

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

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

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

  1. フォントファミリー名は引用符で囲む
  2. 総称フォント名は引用符で囲まない
  3. 複数のフォントを指定するときはカンマで区切る
  4. 前に書いたフォントが優先
  5. フォントファミリーは各OS表示用に複数のフォントをしていておく
  6. 最後に総称フォントを指定する

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

  • MacOS→游ゴシック体、YuGothic
  • Windows→游ゴシック、Yu Gothic

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

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 Catalina に組み込まれているフォント - Apple サポート (日本)

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

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

macOS Monterey に組み込まれているフォント - Apple サポート (日本)

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

游ゴシックは iOS と Android では非対応

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

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

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

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

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

  • Windows で游ゴシック体を擦れさせないようにするためにはフォントファミリーに Medium を設定してフォントの太さを太く表示させる。
 "游ゴシック Medium", "Yu Gothic Medium"
  • Mac OSでは游ゴシックはダウンロードフォントで標準で搭載されていないOSもある
  • 游ゴシックは iOS と Android では非対応

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。