游ゴシックってどうなんだ?

今までサイトを作る際、Windowsはメイリオ、Macはヒラギノ角ゴ Proを指定していました。

文字の幅が違い表示崩れが起きたりするため両OSでの確認は必須。

そのため何かと面倒くさい。

そして最近知ったのが「游ゴシック」。

■游ゴシックってなんだ

WindowsはWindows 8.1以上、MacはOS X 10.9以上のバージョンで標準搭載されているフォントです。

両OSに搭載されているためわざわざWindowsとMacで指定を別々にする必要がなく、同じ様に文章を表示することができます。

そのため今とても注目を集めているフォントなんです。

■游ゴシックを主体としたフォント指定

游ゴシックは両OSに搭載されているので指定はこのフォントだけでOK。

なんて便利。

しかし・・・

現実はそんなに甘くない。

Windowsで現在主流なのは7であり、Macでは10.7とか10.8とか使ってる人はまだまだいる。

それにスマートフォンには游ゴシックは搭載されていない。

なので、游ゴシックを主体としつつ各OSを考慮したfont-familyを考えます。

で、考えた末の構成が下記。

font-famiry: Verdana, YuGothic, '游ゴシック', 'Hiragino Sana', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', Roboto, Droid Sans, Osaka, 'MS PGothic', 'MS Pゴシック', sans-serif;
Verdana
大半のOSが対応している欧文フォントで、見やすく読みやすいため、すべてのOSで英数字はVerdanaが適用されるよう一番始めに書きます。
YuGothic, ‘游ゴシック’
念のため英字表記と日本語表記の両方を指定します。
‘Hiragino Sana’, ‘ヒラギノ角ゴシック’
OS X 10.11とiOS 9から変更されたヒラギノ角ゴの表記です。
‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’
従来の表記方法です。
Meiryo, ‘メイリオ’
游ゴシックが搭載されていないWindows 8.1以前のWindows向けです。
Roboto, Droid Sans
Android向けの指定です。
RobotはAndroid 4.0以降向けです。
Osaka, ‘MS PGothic’, ‘MS Pゴシック’, sans-serif
念のため古いOS向けも入れておきます。

■OSやブラウザで太さが異なる

ここで問題が発覚。

なんとWindowsとMacで表示される太さが違う。

表示できる太さはWindowsが Light、Regular(Medium)、Boldの3種類でMacはMedium、Boldの2種類。

何も指定しないとWindowsはLight、MacはMediumが適用される。

そのため、Windowsでは細く見えずらい。

特にChrome。

下記がWindowsのEdgeとChrome、MacのSafariで太さを指定しない場合とEdgeとChromeでmediumを指定した場合の表示を比べた物。

游ゴシック表示比較
游ゴシック表示比較

フォントサイズは16px。

明らかにChromeが細い。

この様に同じフォントでもOSやブラウザ毎にレンダリングが変わり見え方も異なるため注意が必要。

WindowsもMediumで表示するには数値で500を指定する必要があります。

font-weight: 500;

もしかするとディスプレイの性能も関係するのかな?

■結局游ゴシックってどうなんだ?

フォントとしてはきれいだし良いと思う。

しかし、小さい文字には不向きな気がする。

それに結局WindowsとMacで表示が変わってしまうし・・・

という事で、結局フォントから游ゴシックは外しました。

個人的にWindowsではやはりメイリオが一番良いと思います。


コメントを残す