CSSの明朝体とゴシック体【現役エンジニアが解説】

PROGRAM

今回は、CSSの明朝体とゴシック体について、それぞれに分け、簡単に解説していきます。

明朝体

明朝体は線が細く、可読性に優れたフォントです。

例えば、游明朝やヒラギノ明朝、MS 明朝(MS P明朝)等があります。

body{
    font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}

上記のコードでは、body要素でWindowsやApple等の明朝体のフォントを指定しています。

ゴシック体

ゴシック体はインパクトがあり、見出し等に使われるフォントです。

例えば、メイリオやヒラギノ、MS ゴシック(MS Pゴシック)等があります。

body{
    font-family:"メイリオ", Meiryo, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "MS Pゴシック", "MS ゴシック", "MS PGothic", sans-serif;
}

上記のコードでは、body要素のフォントとしてWindowsやApple等のゴシック体を指定しています。

プロポーショナルフォント

Pの付くフォントはプロポーショナルフォントと呼ばれるフォントです。

Pの付くフォントは文字ごとに間隔が異なり、Pの付いていないフォントは等幅となっています。

.hoge{
    font-family:"MS 明朝";
}
.hoge-p{
    font-family:"MS P明朝";
}

上記のコードでは、hogeのクラスの要素に等幅のMS 明朝を、hoge-pというクラスの要素に等幅ではないMS P明朝をフォントに指定しています。