Webサイト制作におけるフォント（font-family）の設定

Web CSS

Webサイト制作において、CSSのリセット項目の一つとしてfont-familyの指定がある。

fontに関しては正直ほぼ無知ではあるが、2013年7月時点での推奨の設定を習ったので、まとめておく。

通常の推奨設定

ポイントは以下の通り。

  • Macの日本語初期設定のため、欧文書体を指定することに違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにする
  • Windowsの場合は英数字も「Meiryo」のままにしておきたいので、「Meiryo」の前に「Arial」や「Lucida Sans」を入れないようにする
  • 「MS Pゴシック」は指定しなくても必要な時に表示されるためあえて記述しない

以下、コード。

  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;

もし英数字をWindowsでは「Verdana」、Macでは「Lucida Grande」にしたい場合は、以下のようにする。

  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Verdana,
    Meiryo,
    sans-serif;
Windowsでキレイな明朝体を表示したい場合

ポイントは以下の通り。

  • 「HG明朝」（MS Officeをインストールするとついてくるフォント）は13pxからアンチエイリアスがかかる
  • 用途としては、見出しのような大きいサイズに向いている

以下、コード。

h1 {
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
  font-weight: bold;
}