ウェブサイトで游ゴシック Yu Goshicを使う時に注意すること

游ゴシック体は、Mac(OSX Marverics以降)、Windows(8.1以降)でもインストールされているため、ウェブサイトでfont familyに設定すればMacやWindowsでみたときに表示の差異がなくなる(完全にではない)ので使われることが多いですね。

でも游ゴシックをfont familyで指定しても見え方がWindowsとMacでは違いが出ます。Windowsではかすれたようなフォントに。

原因は、游ゴシック体の標準のフォントウェイトがWindowsとMacでは違うこと。

Windowsでは、游ゴシック体は

Light
Regular
Medium
Bold

の4種類で、デフォルトのウェイトはLightのよう。

Macでは、

Medium
Bold

の2種類で、デフォルトのFont weightはMediumになっている。

MacとWindowsで游ゴシックを差異なく表示するには

font familyと一緒にfont weightを指定してあげます。

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

font-weightの値はMacとWindowsを見比べていい塩梅で決めました。

ちなみに
"游ゴシック体", YuGothic は Mac向け
"游ゴシック", "Yu Gothic" は Windows向け

MacとWindowsで表記が違うみたい。
全部指定しないとブラウザによって正しく表示されないため。

※WindowsでもWindows8.1とWindows10では見え方に違いがあるようです。

参考:
Wikipedia 游書体
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?

html

Posted by ともろう