ど素人から毛を生やす。<延>

win10やAndroidを踏まえながら2015年版font-familyを考える

Web > css 2015年11月11日(最終更新:1年前)

このページは2015.11.11に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

Windows10から「游」フォントがデフォルトに追加されたそうですね。

メイリオと游ゴシックの比較をしてくださっているサイト様がありました
個人の所感としては、小さいフォントは不便そう。標準サイズ以降なら軍配が上がる感じですね。
メイリオには20px代の見栄えが悪いという致命的な弱点もあるので、基本的には游を使いたいなーと思いました。

しかも、游フォントには明朝体もあるんですね。
今までwinの明朝体にはHGS明朝Eを使ってましたが、確実性に自信が持てなかったんですよね。
webでキレイに見える明朝フォントが、基本導入されるというのは嬉しいです。かなり。

というわけで、font-familyも考え直す必要がありそうです。

この際なので、いまだかつて無く真面目にfont-familyを考えました。
なお、今回はWebフォントを使わない方向でやってます。

ゴシック編 - 取り敢えず游を最優先? -

font-family:"游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, Avenir, Verdana, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Roboto, Meiryo, sans-serif;

あたりでしょうか?

フォント名 導入OS 説明
游ゴシック Win10 細身の日本語フォント
Avenir Mac10.8以降 美しい半角英数字フォント
Verdana 1996以降win製品 読みやすさに特化した半角英数字フォント
Arial 1990以降win製品 winでもmacでも確実な半角英数字フォント
ヒラギノ角ゴ Pro(N) Mac OS X(0.5 iOS)以降 読みやすいMac標準日本語フォント
メイリオ win Vista以降 お馴染みの日本語ゴシックフォント
Roboto Android4以降 Google開発のオープンソースフォント

游フォントは英数字のベースラインを下げ、日本語とのバランスを取っているとのことなので、半角英数字専用にフォントを振らない方が良いんじゃないかなーと思います。
ので、最優先。
また、游ゴシックが複数宣言されているのは、MacとWinで名称が微妙に異なっているらしい故です。めんどい。

その後、半角用フォントを指定して、日本語フォントを指定する流れがベターかなー?と。

明朝編 - 半角フォントは指定しない方が良さげ -

font-family:"游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HGS明朝E", "MS P明朝", serif;

でしょうか?

フォント名 導入OS 説明
游明朝 Win10 細身の日本語フォント
ヒラギノ明朝 Pro(N) Mac OS X(0.5 iOS)以降 読みやすいMac標準日本語フォント
HGS明朝E Microsoft Office製品 普及率の高いwebで見栄えの良い明朝フォント

半角英字用フォントとの併用も試してみましたが、ツメがついていないと明朝体との相性は今ひとつな感じがします。

webフォントで明朝体と相性の良いフォントを持ってくるなら別ですが、そうでないときは半角用を指定しない方が良いと思います。

参考サイト様

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (1)
  • (・∀・) 参考になった (1)
  • (`・ω・´) 役に立った (2)