あっかぎのページ

CSSの游ゴシックで右往左往した話 

WindowsとMacで同じフォントが使えるということで『游ゴシック』にとびつきました。見た目も読みやすいし。ところが・・・

CSSの游ゴシックはWindowsとMacで違う

先に結論です。CSSの游ゴシックの指定は次のようにします。

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

ここから先は、なんでそんな書き方になったのかのお話です。ちなみに、ぼくの作った格安SIMのサイトは游ゴシックがない場合に備えていくつかのフォントも指定しています。

font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;

游ゴシックのCSSには次の2つの問題が潜んでいます。

  • WinとMacで太さが違う問題
  • WinとMacでフォント名が違う問題

この記事はこのあたりに絡んだ内容になります。

ことの発端はこの記事

20160711_1 20160711_2

(Win Chromeで左がfont-weight:500、右がfont-weight:normal クリックで拡大)
画像を開いて比べると、右側がかすれた感じで読みにくいのがわかります。

『游ゴシック』で右往左往した事の発端はこの記事。

「Windowsで游ゴシックを使うとfont-weight:500以上にしないと字がかすれるよ」というお話で、ぼくのサイトもiPhoneやiPadは普通に読めていたのに、Windows PCのChromeでみると字がかすれ気味になっていました。

font-weight:normal指定だったので「こんなものなのかな」くらいで気にしてはいましたが、先ほどの記事を読むまではそのままにしていました。そんな時に、上の記事を読んでWindows PCで字がかすれ気味の理由がわかった次第です。

もちろん、すぐにCSSの指定をfont-weight:normalからfont-weight:500に指定しなおして万事OK。・・・のはずでしたが、これでは解決しませんでした。

Mac系だと太文字に

20160711_3 20160711_4

(iPhoneで左がfont-weight:500、右がfont-weight:normal クリックで拡大)
画像を開いて比べると、左が太字で読みにくいのがわかります。

ところが、font-weight:500にするとMac系だと太文字扱いになってしまいました。最初、「WinPCとAndroidスマホで字がきれいになってOK」くらいのチェックしかしていないまま、Mac系の太字に気が付かずに1週間くらい放置してしまいました。

たまたま、iPadでさっきのサイトを見てみたら、なんと字が全部太字で読みにくすぎてびっくりしました。游ゴシック問題を解決したものばかりと思い込んでいたのですが、全然解決できていませんでした。

font-weight:500にするとWinとMacで文字の太さが違うという問題の解決にはなっていなかったのです。

その理由は游ゴシックの太さ(ファミリー)にありました。

  • Windows: Light/Regular/Medium/Bold
  • Mac: Medium/Bold

Windowsはfont-weight:normalを指定するとRegularが選ばれて、かすれたような字になってしまいます。そこで、font-weight:500とするとMediumが適用されて読みやすい字になります。

ところが、font-weight:500のMacではBoldの方が採用されるので、太字になってしまうというカラクリでした。

CSSの游ゴシックはWinとMacで指定が違う

さらに游ゴシックの問題は続きます。WindowsとMacでfont-familyの指定が違うのです。これも調べるまで知りませんでした。

Windows Mac
游ゴシック体 x o
YuGothic x o
游ゴシック o x
Yu Gothic o x

最初は次のように指定すればOKだと勘違いしていました。

font-family: 游ゴシック, "Yu Gothic", sans-serif;

ところが、これだとWindows版だけに対応していて、Macにはsans-serifの方が適用されてしまいます。これも落とし穴の1つでした。

解決方法はWin用とMac用で太さを指定

この問題の解決を教えてくれたのが次のページです。

最初に書いた結論の次の指定。

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

上のようにWindows用とMac用それぞれの指定を記述して、Windows用には太さ(ファミリー)も併記します。これでWindowsでもMacでも同じフォントで太さもほぼ同じような書体になりました。

ただ、游ゴシックはWindows8以降なので、それ以前のバージョンや他のOSも考えるとメイリオやヒラギノ角ゴなどの指定もあった方がいいかもしれません。

おわりに

Macのフォントがいいのは周知のことですが、Windowsでもメイリオや游ゴシックなど読みやすいフォントが使えるようになってきました。特に、游ゴシックはWinとMacで共通に使えるフォントということで、ぼくも何も知らずに使ってしまいました。

そしたら、ここに書いたようないろいろな落とし穴がありました。PC、スマホ、Win、Macといろいろな端末が増えてきてチェックも大変ですが、今回の一件もまさしくそれに該当する案件でした。

日本語Webフォントも実用はまだまだ先な気がしますので、しばらくは游ゴシックでがんばっていきたいと思います。