Help us understand the problem. What is going on with this article?

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

More than 3 years have 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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした