システムフォント指定

  -  9styles
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
34px
32px
30px
28px
26px
24px
22px
20px
18px
16px
15px
14px
13px
12px
11px
10px
9px

書体について

「MAC」「Windows」にデフォルトで搭載されているシステム・UIの為に開発されたフォントで表示させるためのフォントファミリーの指定方法になります。珍しい指定方法ですが、海外のサイトでは日本語を考慮しなくていいので、一般的になりつつある指定方法でもります。主に英語の表示時、Webフォントを使わずシステムフォントのみで表示させたい場合の指定方法になりますが日本語も綺麗に表示できる方法です。

MAC・iOSは「San Francisco」。Windowsでは「Segoe UI」というフォントで表示されます。グラフィックデザイナーさんには耳馴染みのないフォントかもしれません。
また、こちらの指定は日本語フォントの指定は行なっていないので、別途指定する必要があります。Webデザインをコーディングする際の参考になる「フォント指定」による組見本です。Webデザイナーさん、コーダーさんは参考にしてください。

「font-family」の指定は実際下記の通り行っています。

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
font-style:normal;
font-weight: 400;

※ウェイトは実験的に「100〜900」まで100ごと、9段階で指定して組見本を表示しています。
※font-weightの数字は都度変更しています。

-apple-system

MAC・iPhone・iOSの英字書体の指定になります。最初に指定するのは、他に影響を及ぼさないApple用の英字フォントです。見慣れないフォント名ですが、コレを指定するとApple独自のフォント「San Francisco」という書体が適用されます。

BlinkMacSystemFont

BlinkMacSystemFontという指定は-apple-systemと同じApple独自のフォント「San Francisco」が適用されます。
-apple-systemと何が違うかというと、こちらはBlink(フォント名がそのままです)、WebKitから派生したレンダリングエンジン用フォントです。
純粋なWebKitであるSafariは-apple-systemが適用されます。

Segoe UI

Windows 10のUI用のフォントとして用意されているSegoe UIフォントの指定です。日本語は含まれないので英語だけ適用されることになります。

まとめ

Mac・iPhone・iPadでは、日本語指定を行わないと「日本語」「英数字」のバランスをみると、font-weight「300、400、600、700」が綺麗に表示されています。
Windows10(Microsoft Surface Pro)ではfont-weight「400」がレギュラーのウェイト。「700」がBoldのウェイトで綺麗に表示されていました。

Mac・Windows両方の端末を考慮すると、レギュラーが「font-weight:400;」、ボールド(太字)「font-weight:700;」の2種類の使い分けで指定するのがオススメです!
※Androidでは搭載されているフォントが各機種バラバラなので、検証がさらに必要です。Webデザイナーさん、コーダーさんは是非、いろいろな端末で検証してみてください。

書体制作・デザイン

参考サイト

TAG

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