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

  -  4styles
Yu Gothicのみ font-weight:400;
Yu Gothicのみ font-weight:500;
Yu Gothicのみ font-weight: 600;
Yu Gothicのみ font-weight: 700;
40px
38px
36px
34px
33px
32px
31px
30px
29px
28px
27px
26px
25px
24px
23px
22px
21px
20px
19px
18px
17px
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で使い分けるが良さそうです。

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;

TAG

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

Webデザイナーの為のWebデザインギャラリーGood Web Design