fontfamilyの指定は2014年の生明さんの投稿以降、様々なものが作られています。
まあ気にしないという方もいるかもしれませんが2018年現在、Dreamweaverでデフォルトの設定はバグがあり、Safariではbold指定が無効化されています。
なので、最低限の指定でできる、現状最適なものは何か、と考えてみました。
結論から言うと、こちらです。
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
ちょっとだけ解説。
まず前提として和文のWebfontは使用していません。
これは人によって好き嫌いがあったり、表示までのタイムラグが起こり得ることを考えてのものです。
もし使用したいという方は、”Helvetica Neue”の後に入れてあげれば良いかと思います。
ちなみにそんなことを言いつつも、このサイトではM+フォントをHelveticaの後に挿入して使用しています。あは。
-apple-system, BlinkMacSystemFont
Appleのシステムフォント「San francisco」をSafariで使用するために、-apple-systemを指定。
続いてMac版Chromeで使用するためにBlinkMacSystemFontを指定しています。
Helbvetica Neue
上記に続いての和欧混植です。
和文フォントの従属欧文ではなく、欧文フォントを指定しています。
この辺は趣味もあるので、他のフォントにするのも有りかと。
遊ゴシック体
MacとWinで共通で使える美しいフォントということで、遊ゴシックを指定しています。
ここで注意しなければいけないのが、MacとWinでウエイトが異なること。
指定を誤ると細すぎて読みづらくなってしまう場合があります。
詳しくはこちらのサイトが参考になるかと。
游ゴシックはWindowsとMacでは名前が違いますので、それぞれを指定する必要があります。
Windowsでは「游ゴシック」と「Yu Gothic」です。
Macでは「游ゴシック体」と「YuGothic」です。
もう一つ注意点があります。
游ゴシックをそのまま指定するとWindowsとMacで太さが異なって表示されてしまうのです。
というのも、WindowsとMacでは標準搭載されているウェイトの種類が違うのです。
WindowsにはLight、Regular、Medium、Boldが搭載されていますが、MacにはMediumとBoldしか搭載されていません。
ウェイトの指定をしないで使用した場合、WindowsではRegularが、MacではMediumが使用されます。
Regularは細すぎて見づらいので、WindowsでもMediumで表示されるようにします。
そういうわけで冒頭で紹介したように
“游ゴシック Medium”, “Yu Gothic Medium”
と指定しました。
Hiragino Kaku Gothic ProN
このあたりは生明さんの指定を参考にしています。
「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。
Meiryo
古いWinのOSを考慮してメイリオを指定しています。
これ以外のOsakaやMS Pゴシックは他のフォントが無くて、どーしようもない場合に出てきちゃうもんなので指定の必要は無いかと。
sans-serifの記述だけで十分ですね。
なお、明朝についてはよりデザイナーそれぞれのやりたい方向性が分かれてくるかと思うので、今回は取り上げません。
本文は可読性を考慮してゴシックベース、見出し部分で明朝にするというのはありそうな組み合わせですね。
実際の運用としては他にWebfontを使用することもあるかとは思いますが、ベースとしてはこれが現状（2018年）の最適解なのかなと考えています。
まあ毎年のように色々と状況が変わっているので、あくまでも「今」限定ですが、参考にしてみてください。
