2013年11月8日

CSSでキレイな日本語フォントの明朝とゴシック

CSSでfont-familyでフォントを指定するときに、とりあえず私がベーシックとして使うパターン。
Windows、Mac OS両方に対応。

明朝系

ブラウザで明朝系のフォントを使うときにいつも使っているCSSのフォントファミリー。

主に見出しなどの大きな文字に使用。
CSSソース

h1 {
font-family:
   "ヒラギノ明朝 ProN W6",
   "HiraMinProN-W6",
   "HG明朝E",
   "MS P明朝",
   "MS PMincho",
   "MS 明朝",
   serif;
font-weight: bold;
}
ブラウザ表示例

明朝系の日本語フォントがキレイに表示される

ゴシック系

ゴシック系の場合は好みもあると思いますがメイリオ系が優しく見える気がします。

こちらも主に見出しなどに使用。
CSSソース

h1 { 
font-family: 
 "メイリオ", 
 "Meiryo", 
 "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN",
 "MS Pゴシック", 
 "MS P Gothic", 
 Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
ブラウザ表示例

ゴシック系の日本語フォントがキレイに表示される