このサイトのフォントをおしゃれにしたくて様々なサイトから情報を集め、それぞれのフォント設定のいいとこどりをした設定を行いました。
おすすめの設定はこれだ！
結論から書いてしまいます。これが最高におすすめの設定です。
このままコピペしてスタイルシートに適用していただければ基本的にはどんな環境でもいい感じのフォントが表示されます。
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
font-familyの書き方
font-familyの指定方法にはいくつかのルールがあります。
- 適用したいフォントから順番に書く
- 全角文字やスペースを含むフォント名の場合にはダブルクォーテーションかシングルクォーテーションで囲む
- フォントに英語名と日本語名がある場合には日本語名から書く
- 総称フォントファミリーを最後に書く
Lato
LatoはGoogleフォントに登録されているフォントです。
GoogleフォントはWebフォントを提供しているサービスです。
フォントは通常、ローカル環境に存在するフォントを使用する仕組みになっていますが、Webフォントを使用するとサーバーからフォントを読み込んで様々なブラウザで表示することが出来ます。
Latoはとても美しくてやわらかい雰囲気のフォントです。
様々なスタイルがあります。
当サイトでは英数字にLatoを使用しています。
Webフォントを使用する場合にはstyle.cssで最初に@importしておく必要があります。
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
ウェイトに400(Regular)と700(Bold)を指定して標準の太さと太字に対応しています。
Noto Sans JP
Googleフォントからもう一つ。
こちらはヒラギノ角ゴシックを元に作られた和文フォントです。
ヒラギノ角ゴシックよりも丸みがあり、個人的にはこちらの方が好みです。
2016年は次に述べる游ゴシックを採用しておりましたが、2017年はNoto Sans JPを使っていこうと思います。
あなたがいま読んでいるこの文章もNoto Sans JPで表示されているはずです（変更していなければ）。
Webフォントですので、先ほどと同様に@importしておきます。
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
游ゴシック
游ゴシックは細くて小さめの字体で、見た目がとても美しいです。
以下の画像が游ゴシックの見本です。
字游工房のホームページから詳細を見ることができます。
個人的にはヒラギノやメイリオよりも好みです。
游ゴシックはWindowsとMacの両方に標準搭載されています。
これまではWindowsならメイリオ、Macならヒラギノをそれぞれ指定するのが定番でしたが、游ゴシックの登場によりどちらの環境でも同じフォントを指定することができるようになりました。
ただし、游ゴシックが搭載されているのはWindows 8.1以降、OS X Mavericks以降なので、それより古い環境では別のフォントを指定しなければなりません。
当サイトでもヒラギノとメイリオを游ゴシックの次に指定しています。
游ゴシックを使用する際の注意点
游ゴシックはWindowsとMacでは名前が違いますので、それぞれを指定する必要があります。
Windowsでは「游ゴシック」と「Yu Gothic」です。
Macでは「游ゴシック体」と「YuGothic」です。
もう一つ注意点があります。
游ゴシックをそのまま指定するとWindowsとMacで太さが異なって表示されてしまうのです。
というのも、WindowsとMacでは標準搭載されているウェイトの種類が違うのです。
WindowsにはLight、Regular、Medium、Boldが搭載されていますが、MacにはMediumとBoldしか搭載されていません。
ウェイトの指定をしないで使用した場合、WindowsではRegularが、MacではMediumが使用されます。
Regularは細すぎて見づらいので、WindowsでもMediumで表示されるようにします。
そういうわけで冒頭で紹介したように
“游ゴシック Medium”, “Yu Gothic Medium”
と指定しました。
総称フォントファミリー
フォントは大まかに分けると次の5つのカテゴリに分けられます。
- sans-serif…ゴシック体系
- serif…明朝体系
- cursive…筆記体系
- fantasy…装飾系
- monospace…等幅系
font-familyでは最後に総称フォントファミリーを指定することがお決まりになっています。
それまでに記述したどのフォントも入っていない場合には総称フォントファミリーが適用されることになり、その環境に入っている◯◯系のフォントが使用されます。
まとめ
和文フォントはNoto Sans JPで大満足なのですが、英数字はLatoの方がきれいなので当サイトでは両者を併用しています。
フォントを変えるだけでサイトのイメージがぐっと変わるので、みなさんもぜひ試してみてください。
ちなみに、当サイトでは文字色や文字と文字の間隔、行の高さや段落の間隔など様々な項目をCSSでいじっています。
さらにこだわりたい方はそれらに挑戦してみてもいいかもしれません。
