デバイスフォント（Mac: 游ゴシック、Windows:游ゴシック）

書体について

「Mac・Windows」共通に標準でインストールされている日本語書体「游ゴシック」の組見本です、主にWebデザインのためか、Webデザイナー、HTMLコーダーさんが参考になる組見本となります。Mac、Windows両方に同じ書体がインストールされているのでWebデザイン時によく使われますが、実はMacとWindowsで同じCSSで指定すると若干見え方が異なります。上の組見本のプレビューでは「font-weight」を「400」〜「700」で4段階で指定しましたが、「400」と「700」の2種類で「400」をRegular、「700」をBoldで使い分けるが良さそうです。

Macでの注意

2023年、Safariでは「游ゴシック」が表示されません。「iPhone」「iPad」でも同様の現象が起きています。（Apple社のライセンスの都合上と噂されております。）Chromeでは表示されますので、ブラウザ「Chrome」をインストールして確認してください。
※2023年現在（今後仕様が変更される可能性があります。）

Windowsでかすれたり、アウトラインがギザギザになる問題について

Mac・iOS（iPhone・iPad）の「游ゴシック」は基本的に綺麗に表示できるフォントですが、WindowsではフォントとOSの仕様の相性の影響で12px以下になると「かすれて見える印象」になります。（※Microsoft Surface Pro Windows Xで確認）

「游ゴシック」はWindowsでは13px以上で設定してデザインするのが賢明です。

CSSの指定方法について

上の組見本のプレビューのCSSによる「font-family」の指定は以下です。「font-weight」の数字の指定が各ウエイト異なります。今回は他のフォントを指定せつ「游ゴシック」のみ指定しています。実際のWebコーディングでは、他の書体も指定したほうが賢明です。
font-family: ‘游ゴシック体’, YuGothic, ‘游ゴシック Medium’, ‘Yu Gothic Medium’, ‘游ゴシック’, ‘Yu Gothic’, sans-serif;