CSSのフォント指定font-family、コレがおすすめ!

2014.5.19 CSS

CSSフォントファミリーはこれにきめました。游ゴシック、游明朝CSSのフォントファミリー指定を、ブラウザやOS間の差異を埋めるために、毎度時間をかけないようにメモすることにしました。

font-familyはこれで!

body {
/* フォントファミリ明朝 */
 font-family:Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
}
body {
/* フォントファミリゴシック */
 font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

Verdana」と「Times New Roman」はWindowsとMacの両方にインストールされているフォントです。これらの英語フォントが先に来るのは、日本語フォントの英数字表示が美しくないからです。

同じく、「游ゴシック」「游明朝」は、Winodws 8.1とOS X Mavericks(10.9)から、両OSに搭載された、非常にきれいなフォント(僕的に)。
しかし、適用されるフォント名が微妙に違うので、必ず「“游ゴシック”, YuGothic,」などと日本語、英語で表記します。

フォントのウェイトについて

ヒラギノとかでよく見かける表記で「W3」「W6」などとありますが、こちらは省略しても表示はされます。
が、古いヴァージョンのSafariとFirefoxで表示がされない場合があるので、念の為表記します。

「MS P」系のフォント

これらは表示が美しくないので、書かないことにします。…のつもりが、どうしても明朝を指定したい!というときのため、明朝系のフォントファミリを指定するときのみ書いておきます

body {
/* フォントファミリ明朝 */
 font-family:Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
}
body {
/* フォントファミリゴシック */
 font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

と、いうわけで、このような結論です。

補足

どうやら「Lucida Grande」を指定すると、、「ヒラギノ角ゴ」は勝手に出てきてくれるようなので、ゴシックで究極の省略形は

body{
 /*フォントファミリゴシック*/
 font-family:'Lucida Grande', Meiryo, sans-serif;
}

これでも良さそうです。

結論

クライアントからこだわりがなければ、なんでもいいよね。

美しく行きましょう!

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。