どうもこんばんは！HYPのこうじです。

皆さん使ってますか？使ってますね！
そう。今まさに神ってるフォント『游ゴシック・游明朝』です！

游ゴシックや游明朝は、Macは『OS X Mavericks』、Windowsは『8.1』から導入され、簡単にMacとWindowsの見た目事情を共通化できるというwebデザイナーの人にはたまらない一品となっています。

そんな便利な游ゴシックですが、実は同じものを使っているハズなのにWindowsとMacで表示が若干違います。
MacがRetinaディスプレイだからとか、Windows10のUIが使いづらいからとかそういう個人の好みの問題ではありません。
デフォルトで設定されている書体の設定がOS毎に違う事が原因です。

そんな游ゴシックを快適に使う為に設定をしっかり行ってから使用しましょう！

Windowsだと文字がかすれる

Macだと普通に表示されるけど、Windowsだと文字が若干かすれて見える。
これは別にMacがスタバとかで意識高く出来そうとか、Windowsだとお洒落に見えないとかそういう理由ではありません。
標準の表示がOS毎に違うのが原因です。
あれ。さっきも言ったっけ？

例えばMacの場合は『游ゴシックのミディアム』ですが、Windowsの場合は『游ゴシックの細字』がデフォルトです。
なのでMacはハッキリ見えるけど、Windowsは細字なのでかすれて見える…という事です。

font-weightを設定して解決

これは、スタイルシートでfont-weightに500を設定する事で解決出来ます。
これを当てる事で細字から標準に変わるので、普通の文字として見えるという事です。

html {
    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif; font-weight: 500;
}

font-weightを数値で設定する場合

ちなみに、font-weightとかは『bold』とか『normal』はよく使うと思いますが、数値ではあまり使う事は無いですよね。
数値の場合は100～900で設定出来、下記のような割り振りとなっています。
ただ、9種類も用意されているフォントなんてそうそうない気もするので、規定値以外は変わらない事も多いです。

html {
    font-weight: 100;
    font-weight: 200;
    font-weight: 300;
    font-weight: 400; /* normalと一緒 */
    font-weight: 500;
    font-weight: 600;
    font-weight: 700; /* boldと一緒 */
    font-weight: 800;
    font-weight: 900;
}

IEで使用するとラインがずれる

これで解決したかと思ったら、なんとIEで游ゴシックを使うと文字下に変な余白が入り文字がズレるという現象が起こります。
これは、Windows10の無償アップデートを期間終了30分前に慌てて始めたら、ダウンロード途中に無償期間が終了しましたとなって結局アップデート出来なかったからという理由ではありません。

色々調べたのですが、結局この現象仕様っぽいです。
そんなIEかわいいですよね。

ちなみに、どうなるのかというか下記の画像を御覧ください。
IEだけ微妙に上にずれているのが分かりますね。

ボタンを作る際には注意

正直ズレているだけならまだいいですが、ボタンデザイン等の境界が分かるデザインを利用する場合注意が必要です。
なんか中途半端にずれているボタンが完成します。

これを回避するには？

游ゴシックを使わない

一番の回避方法はこれです。
游ゴシックを使わなければなんてコトはありません。解決！

…とか言ったら元も子も無いので、IEのみ『メイリオ』にしちゃう…というのが妥当です。
IE10以降にのみスタイルシートを適用するハックがあるので、それを利用して行います。

@media all and (-ms-high-contrast:none) {
    html {
        font-family: 'メイリオ', 'Meiryo', sans-serif;
    }
}

こうする事で、IE10以降のブラウザのみ設定したスタイルシートに変更出来ます。

まとめ

表示も柔らかくページになじみやすい上、汎用的に使える為ぜひ使っていきたい『游ゴシック』。
ちゃんと仕様と特性を理解して使えばめちゃくちゃ使いやすいフォントなので、是非活用していきたいですね！