font-family 2018 あれこれ悩むより、有名サイトを参照するといい。

フォントファミリー(font-family)の指定については、多くのサイトがそれぞれの工夫を重ね、デザイナーの意見なども含めて記載してある。結局どれが一番いいのか?ということで、毎回サイトを作成するたびに悩んできた。
あれこれと悩むより、有名サイトから拾ってきた方が確実では??

ということで、今現在は下記の設定にしている。

.font-inherit{
	font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',
		"segoe ui",'游ゴシック  Medium','メイリオ', Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
}

各有名サイトのフォントファミリー(font-family)指定を見てみる。

MSNニュース

https://www.msn.com/

言わずとしれた、MicroSoftのニュースページ。
最初にここを参照したのは、フォントの指定方法によっては、IEやエッジというブラウザでの文字が汚くなりがちだったからです。

ここでの設定はこのようになっています。

/*media all*/
body, button, input, select, textarea {
    font-size: 1.4rem;
    line-height: 1.357;
    font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif;
}

Segoe(シーゴー、シーゴ)はマイクロソフト社が使用している書体の一つ。officce製品や、Win7などのシステムフォントにも採用されているフォント。そのためTOPに指定されていると思われる。

yahooニュース

https://news.yahoo.co.jp/

yahooニュースは「遊」系のフォントは使用せずに、IE等では安定のメイリオでスタートしている。
ただし、指定の順番として和文フォント > 欧文フォントなので、欧文フォントはほとんど使用されない可能性があります。

/*media all*/
body, input, textarea, select {
    color: #333;
    font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
}

Apple

https://www.apple.com/

では、Mac、iPhone、iPadなどの製品を出している、Appleはどうなのか?

/*media all*/
:lang(ja).intro {
    font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
}

Google

https://www.google.co.jp/intl/ja/about/

Googleのfont-family指定は非常にシンプルです。
下記は会社情報などのページで指定してあったfont-familyです。

body, html {
    color: #757575;
    font-family: Roboto,Arial,Helvetica,sans-serif;
    font-size: 16px;
}

その他参考になるサイト

Font-familyメーカー:標準フォント一覧からサクッと指定

https://saruwakakun.com/font-family

このサイトでのお勧め設定は、下記のようになっていました。

font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic',sans-serif;

font-familyで指定できるフォント名一覧 – W3G

https://w3g.jp/sample/css/font-family

ios11以前と以降での、-apple-systemの表示

https://qiita.com/a_t/items/18693be11bd87f98d212

2020年まで使えるfont-familyおすすめゴシック体

https://qiita.com/RinoTsuka/items/4181efd43d072e246519