CSS
font

游ゴシックとヒラギノとメイリオの見比べた結果、font-familyには游ゴシックを指定したい

More than 1 year has passed since last update.

Mac OS 10.9とWindows 8.1から游書体が標準搭載されている。
とはいっても、今までどおりヒラギノとメイリオでいいやと思っていた。
しかし、見比べてみたら游ゴシックが思った以上にキレイ!
個人的にはヒラギノよりもやわらかい感じで游ゴシックの方が好き。
これからは、font-familyには是非とも游ゴシックを指定したい。

見比べる

環境

環境 OS ブラウザ 備考
Mac OS X Yosemite Chrome MacBook Air
Windows Windows 7 Chrome 個別に游書体をインストール(※1)

※1 Windows 7に游書体をインストール
Yu Gothic Yu Mincho Font Pack

Mac(ヒラギノと游ゴシック)

左がヒラギノで右が游ゴシック

mac.png

Windows(メイリオと游ゴシック)

左がメイリオで右が游ゴシック

win.png

同じ游ゴシックなのに?

同じ游ゴシックなのにWindowsの方が細いフォントになっているのは、font weightのサポートの違い。
Macはlightが搭載されていない。

個人的には、細いフォントが好きなので、Windowsの游ゴシックが一番キレイに見える。

ベースにしたいfont-family指定

結論から言うと、游ゴシックを頭にして、ヒラギノ、メイリオを指定する。
もちろん、アルファベットは別指定とかメイリオはバグが多いから避けるとかはあるけど、日本語の基本指定はこれでいいかな。

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

参考サイト

伝わるデザイン

デザインの基本がとてもわかり易く説明されたサイト。
フォント以外の内容も役に立つ。
フォントについては、以下にわかりやすく基本からおすすめまで説明されている。
游ゴシックのLightはWindowsのみなどの情報もある。

http://tsutawarudesign.web.fc2.com/yomiyasuku.html

Font−familyのベストな書き方 2015年版

基本的なことからわかりやすく記載されている。
特に、フォントの搭載状況が参考に。

http://sole-color-blog.com/blog/design/246/