font-familyで游ゴシックを使うときWindowsで見ると細すぎて読みづらくありませんか?

   2017年5月11日

Windowsを使っている方で
font-familyで游ゴシックを使うとき、
あれ…なんか細い?って思ったことある方いませんか?

ずーっと思ってたんですけど、なんか主流になりつつあるし
これが普通なのかな…って思いかけていたのですが
私の指定の仕方が間違っていました!

間違ってたというか、足りなかったというか…。

游ゴシックってWindowsだけLightが搭載されてるらしいです。
これが原因でした。

解決法は二つ。
まず一つ目から。

フォント名を気をつけてみる。

まずはフォント名。
指定するときに、


font-family: "游ゴシック体", YuGothic;

と指定してみる。
これだと上記で書いたことに当てはまってしまいます。
なぜかというと太さを指定できる名前があるからです。
これに気づくのにだいぶ時間がかかってしまいました。。。


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

少しの違いですが、やっぱに私的にはMediumのほうが見やすいし読みやすい。

WindowsにはLight、Reguiar、Medium、Boldの太さの種類がありますが
MacにはMedium、Boldの2種類のみだそうです。
なので、ミディアムの太さを指定したあとに通常の「”游ゴシック体”, YuGothic」を指定するのは
Mac用にですね。念のため。

太さに気をつけてみる。

そして、font-weightで指定する方法。
これで指定するとFirefoxだと変わりなしです。Chromeだと効いていました。(私の環境はWindows7です)

太さの指定は以下です。

  • 300 – Light
  • 400 – Reguiar
  • 500 – Medium
  • 600 – Bold

なので、個人的にはMediumの500指定が一番おすすめです。


font-weight: 500;

Choromeは特に細くかすれているように表示されてしまいますが
これで解決しました。

web tipsの記事