Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い!

(2016年6月29日追記:Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました)


タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・

OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であった「MacとWindowsで同じ見た目にする」ということが可能になりました。

しかし実際に指定してみると、Macでは綺麗なのに、Windowsでは文字がかすれたように見えて非常に読みづらくなってしまいます。

これについて「やっぱりWindowsはMacに比べて表示が汚い」とか言われてWindows使いの私はガッカリしていたのですが、実は違うところに原因があったんです。

Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」(「中」は、Windows10から搭載)。
そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。

ちなみに、私がこのサイトで使用しているCSSでのフォント指定は下記のようになっています。

body {
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
}

この “font-weight: 500;” という指定が肝で、この数値を指定してやると、Macでは「ミディアム」、Windows10では「中(ミディアム)」、Windows8.1 では、「標準」が使用されます。
これで、Windowsでも読みやすく表示されます。

なお、Bootstrapを使用していると、リード文に使うクラスなどで、わざと細いウェイトが指定されていることがあるので、後から追記して変更したりする必要があります。

.lead {
font-weight: 300;
}
.jumbotron p {
font-weight: 200;
}

Windowsで游ゴシックの表示がかすれてしまうのは、Windowsが悪いのではなくて勉強不足のWebデザイナーが悪いんです。
よく調べもせずに、Windowsのせいにしないでくださいね。

追記

「Windowsのせいにしないで」って書きましたが、

  • 「デフォルトがLightなのはどうかと思う」
  • 「W3Cの仕様では、font-weight:400; が normal だからWindowsの仕様のほうが悪いのでは」

というご意見もいただいています。

うーん、やっぱり、Windowsが悪いのかもしれませんね・・・
(他にも、ご意見お待ちしています)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です