システムフォント指定

書体について

「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デザイナーさん、コーダーさんは是非、いろいろな端末で検証してみてください。