2013年に発表されたWindows8.1およびMac OS X Marvericksから、『游ゴシック体』がOSに標準でバンドルされるようになりました。その影響もあって、游ゴシック体を標準フォントとして指定するウェブサイトの数も増えてきています。

しかし、css上で単純に遊ゴシックを指定しただけだと、Windows環境では文字がかすれて見えてしまう、という問題が報告されています。

游ゴシックは何故Windowsでかすれて見えるのか – Ryusei’s Notes (a.k.a. M59のブログ)

これに対し、@font-faceを使って各OS向けにフォントの調整を行うことで解決する方法が以下の記事で提示されています。

font-familyにChromeでも読みやすい游ゴシックを指定する方法 – Qiita

また、以下の記事でも触れていますが、この游ゴシック体はcssのfont-feature-settingsプロパティにも対応しています。

文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました | briccolog｜渋谷区神宮前のウェブ制作会社ブリコルール

こうした点を踏まえて、現時点での個人的なcssフォント指定の最適解を組んでみました。
※遊ゴシック体のかすれ対策にあたるのはファイル冒頭の@charsetに続く、2行目から26行目までの@font-face設定と、font-familyで"Yu Gothic", YuGothicと指定する（和文表記の”游ゴシック”,”游ゴシック体”は記述しない→でないと前述の@font-face設定が生きない）という点です。

前述のQiitaの記事を書いた@RinoTsukaさんのこちらの記事のコードをベースに、以下の点を反映させています。

• 「英文フォント→和文フォント」の順で指定。
  • 半角英数字にも和文と同じフォントを適用させたい場合は-apple-systemからArialまでをMeiryoの後ろに移動。
• 非Mac系OS用の英文標準フォントにはArialを指定。
  • 英文フォント単体としてはVerdanaの方が読みやすいように思えるが、和文フォントと併用した場合のバランスを考慮して。
• 「MSゴシック」「MS Pゴシック」は指定しない。
  • Windows XP以前についてはもうサポート終了しているので考慮せず。
• font-feature-settingsを設定。
  • 遊ゴシックが適用されるWindows（8.1～）＆Mac OS X（Marvericks～）、ヒラギノが適用されるMac OS X（Marvericks以前）＆iOS、源ノ角ゴシックが適用されるAndroid（6.0 Marshmallow～）向け。

個人的には遊ゴシックよりは源ノ角ゴシックの方が美しくて可読性も高いので、先日発表された源ノ明朝と併せ、既にバンドルしているAndroidに加えてWindows、macOS、iOSが標準でバンドルしてくれれば…、と願うばかりです。