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

  -  4styles
Yu Gothicのみ font-weight:400;
Yu Gothicのみ font-weight:500;
Yu Gothicのみ font-weight: 600;
Yu Gothicのみ font-weight: 700;
34px
32px
30px
28px
26px
24px
22px
20px
18px
16px
15px
14px
13px
12px
11px
10px
9px

書体について

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

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;

TAG

よりよりサイトを目指してWikipediaのように「フォントを愛する方、詳しい方から」の情報提供や修正依頼を募集しています!
「原稿をこうして欲しい! 修正して欲しい! リンクの修正依頼・ご意見等」ございましたら、
お手数ですがこちらの改善依頼フォームからご連絡願います!