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

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

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

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

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

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

ちなみに、私がこのサイトで使用している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では「ミディアム」、Windowsでは「Regular」が使用されます。
(400だと「Light」になってしまうようです)
これで、Windowsでも読みやすく表示されます。

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

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

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

コメントを残す

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