tl;dr

うちではこんなfont-familyまわりの指定をしている。たぶん2019年時点でベストの設定。

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
 
html {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
    font-feature-settings: "pkna" 1;
}
 
body {
    @extend html;
}
 
h1, h2, h3, h4, h5, h6, strong {
    @extend html;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic", sans-serif;
    font-weight: 700;
}

なぜこの設定なのか

-apple-system, BlinkMacSystemFont

macOSとiOS用の欧文フォント。後述のRobotoを使えば良さそうではあるけども、WebPが使えないiOS環境の人の読み込み負荷を少しでも下げるために指定している。

Roboto

macOSとiOS以外のための欧文フォント。Google Fontsで読み込んでいる。Androidだとこれもリモートからは読まないはず。
Windows用にSegoe UIとかを指定しても良いんだけどいまいちしっくりこないので。

"游ゴシック体", YuGothic

macOS用の和文。游ゴシック。

"Yu Gothic Medium"

Windows用の和文。游ゴシック。Windowsの場合Chromeで游ゴシックを普通に指定すると文字がかすれるという厄介な問題があり、それを回避するためにウェイト込みで指定している。
@font-faceを使う方法が紹介されていることが多いが、2018年のどこかで使えなくなっているため注意が必要。
macOSに入っているやつとは微妙に名前が違うおかげで「Macだと今度は太すぎる」といったことがない。

これをそのまま太字にするとBoldではなくMediumを機械的に太くしたものが適用され、綺麗ではない。なので太字を適用したいスタイルには"Yu Gothic"を指定することになる。

sans-serif

他の環境でデフォルトのフォントを出すための設定。Windows 7での閲覧が多ければ、これの前にMeiryoを指定してもいい。どうせ今更7なんて使っている人はMSゴシックでも困らなさそうということで、うちでは指定していない。
iOSや古いmacOSはこれでヒラギノ角ゴが出てくるので、特にヒラギノを指定する必要はない。

これ以外に設定してもよいかもしれないfont-family

"BIZ UDPゴシック"

2019-03-09-13-59-12

Windows 10 1809から搭載されたフォント。Windowsの和文用で、これはChromeでもかすれない。ただこれはいわゆるUDフォントで、字形にちょっと癖があるためサイトによっては雰囲気が壊れるかもしれない。

Meiryo

Windowsの標準フォント。Windowsのレンダラに最適化されておりChromeでもかすれない。

"Yu Gothic UI"

WebページにはOSのUIに採用されているフォントを指定するべきだ、という主張がちょっと前に流行っていた気がするが、それをWindows 10で実現しようとするとこれを指定することになる。字形はMeiryo UIに近く、游ゴシックの亜種なのにChromeでもかすれない。

font-feature-settings って何？

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

ここを読んでもらうのが早い。游ゴシックにはカーニング用の情報が入っており、このプロパティを指定するといい感じにカーニングしてくれる。游ゴシックはともかくヒラギノは結構ガッチリ詰まるので、iOSで見ている人はちょっと変な感じに見えるかもしれない。letter-spacingで開ければ良いんだけど、そうすると游ゴシックでは字間が開きすぎるので難しい。

游ゴシックとの戦い、および2019年に使えるfont-family指定