フォントはサイト全体の印象に関わる重要な部分ですので、webサイトを構築する際に必ず設定します。

しかし、どういう意図で書いているのかは伝わりづらいので、私が普段使用している指定と、その説明を書こうと思います。

今回は、ゴシック体の表示の際の指定を説明します。
明朝体等を使う際は、対応した別のフォントに読み替えてください。

実際の指定

以下が、実際に使用している指定です。

body, input, textarea {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

様々なフォントが書かれていますが、順番に説明します。

フォントがいくつも書かれている理由

webページでは、基本的にユーザーのデバイスに入っているフォントを使用して表示しますが、OSや個人の環境によって入っているフォントが異なります。

そこで、いくつもフォントを指定して、該当するフォントがあればそれを使うという形になっています。

font-familyでは、指定されているフォントを左から順番に確認し、入っているフォントが見つかった段階でそのフォントを使用して表示されます。
（左に記述されているフォントほど表示の優先度が高いということです。）

ヒラギノ

まずヒラギノを指定しています。
これはMacOSとiOSに入っているフォントで、優先的にこのフォントが使用されます。

メイリオ

次にメイリオを指定しています。
メイリオは、Windows（vista以降）に入っているフォントです。
Windowsにはヒラギノが入っていないので、こちらで表示されます。

日本語と英語の指定

ヒラギノとメイリオは、日本語での指定と、英語での指定の2つが書かれています。
これは、ブラウザによってはどちらか一方しか認識しないものが存在するためです。

しかし、最近は改善傾向にあるようで、今後はどちらか片方だけでよくなるかもしれません。

verdanaとsans-serif

sans-serifは「ゴシック体」を表すもので、該当するフォントがどれも入っていなかった場合に、そのデバイスでのゴシック体に指定されているフォントで表示するという意味になります。

verdanaは英字のみ適用されるフォントで、読みやすい英数字が表示されます。
基本的にMacOSとWindowsの全てのバージョンに入っており、WindowsXP以前、またはそれ以外のヒラギノもメイリオも入っていない環境で適用されます。

Androidについて

ここまでで、AndroidOSについては指定が書かれていません。
Androidでは、デバイスによって持っているフォントが異なっている場合があり、
特定のフォントを指定しても統一した表示ができないためです。

よって、sans-serifでそのデバイスに設定されているゴシック体を表示させます。

游ゴシック指定について

最近のWindowsとMacOSの両方に含まれているフォントとして、「游ゴシック」というフォントがあります。
（Windows8.1・OS X Mavericks以降です）

このフォントを使用する事で、WindowsとMacでサイトの見た目を統一する事が可能です。
また、新しいOSに入っているため対象者が増え続けると予想できます。

今後はこちらの指定の方が良いかもしれません。

body, input, textarea {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

かなり長くなってしまいましたが、先ほどの指定に最初の4つを追加しただけです。

「游ゴシック Medium」と「Yu Gothic Medium」がWindowsへの指定、「游ゴシック体」と「YuGothic」がMacへの指定となります。

様々な書き方で指定しているのは、前述と同じくOSやブラウザによって認識する書き方が異なるためです。

medium指定について

Windowsへの指定は単純に「游ゴシック」だけではなく「Medium」が追加されています。
これは、Windowsではfont-weightが通常の場合は細くかすれてしまうためです。

medium指定をすることで、MacOS、Windowsの両方で同じ太さで表示が可能です。

font-weight:boldとする場合

游ゴシックでfont-weightをboldとする場合、Macでは太くなりすぎてしまうようです。
そのままでは見栄えが良くないので、以下の指定を追加します。

.bold {
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

この指定はMacでのみ有効で、文字が細く見えるように調整され、文字の端のギザギザも解消されます。
「-webkit-」から始まる行はSafariやChromeなどのWebkit系と言われるブラウザ、「-moz-osx-」から始まる行はFirefoxで適用される指定になります。

終わりに

説明は以上になります。

フォントをダウンロードさせて表示するといった場合には、別でフォントを定義する必要がありますが、
最終的にはfont-familyで指定を行うので、今回の内容を元に設定可能です。