CSSのfont-family指定の前知識とその問題点 【読みやすいフォント指定】

  • 投稿 : 2013-01-26
  • 更新 : 2013-11-10
font-family指定に必要な最低限の前知識をもって、すでに分かっている問題点を知ったうえで、サイトの運営者が考えて決めればよいでしょうというが、本記事の内容です。

font-family:Helvetica,Arial,'ヒラギノ角ゴ Pro W3','メイリオ','MS Pゴシック',sans-serif;
ブログをきれいに表示するためにフォントを指定する 【CSS,font-family】

前知識1:font-family指定は、前から順番に適用される

例1:font-family:日本語フォントA,日本語フォントB


表示するパソコンにないフォントを指定された場合は、その次に書いているフォントが採用されます。日本語フォントAがない場合は、次の日本語フォントBで表示しようとするわけです。

例2:font-family:欧文フォントA,日本語フォントB


半角アルファベットの場合は、欧文フォントで表示される。
日本語(全角文字)の場合は、欧文フォントAには含まれていないので、次の日本語フォントで表示される

半角アルファベットと日本語(全角文字)が混じっている場合は、フォントも混じるということ。

前知識2:OSでの標準フォント

・Windows 7/Vista :メイリオ
・WindowsXP : MS Pゴシック
・Mac OS X : ヒラギノ角ゴ
・iOS(iPhone,iPad) : ヒラギノ角ゴ
・Android 2系 :Droid Sans Japanese
・Android 4系 :モトヤフォント

そのOSでは標準でも、ほかのOSではそのフォント自体がはいていないことがある。


参考:
標準の日本語フォント / もうパンツはかない

前知識3:sans-serif指定や無指定の場合

Internet Explorer 8.0 / Windows 7
・sans-serif Arial / MS Pゴシック

Chrome 10.0 / Windows 7
・sans-serifMS Pゴシック

Safari 5.0 / Mac OS X 10.6
・sans-serifHelvetica / ヒラギノ角ゴシック ProN

ブラウザのデフォルトフォント / もうパンツはかない

環境依存。上記URLで大体の感じがつかめるかと思う。

クライアント側の環境によってフォントが違う。
個人的に一番問題だとおもうのが、Windows7、IEで、メイリオにならずに「MS Pゴシック」になる点。

問題点1:アルファベットと日本語文字が違うフォントだと違和感がある場合がある

まず前提として、ぼくは
「日本語文章に欧文フォントを指定すべきではない」
と考えています。

理由は上記記事のコメントにも書きましたが、
高さ・ウェイト・字幅・ベースライン等が揃わず
非常に不格好になる。
ためです。
http://kirmav.blogspot.jp/2012/12/cssfont-family.html

ブログ(サイト)の内容などによっては、アンバランスさが目立って、読みずらいことはあると思います。
また、海外の人が作ったWordpresやBloggerのテンプレートは日本語フォントの指定がしていないのでで、アンバランスさが目立つ傾向にあるかと思います。

また、「font-family:欧文フォントA,日本語フォントBのような指定」で、欧文フォントの選択がよろしくないと、アンバランスさが目立つと思います。

最近は、一部かどうかは不明ですが、欧文フォントを指定しないというサイトも結構見かけます。

問題点2:フォント順を考慮して書いても、一部で期待通りにならない場合がある

こういう環境では、この順番だとダメだとかいう奴です。じゃぁ、どういう順番ならよいのという話になると、結局結論が出ない堂々巡りになるという話。
たいていは、少数の一部の人にはある程度妥協してもらうような順番を選択することが多いと思うのですが、それでは納得できないとかいう感じでしょうか?

はてなブログの標準テンプレートで行われていることですが、環境に応じてJavascriptで書き換えるという手法があります。

<script type="text/javascript">
<!--
if (navigator.userAgent.indexOf('Mac OS X')>-1) {
  document.write("<style> body {font-family:Helvetica,Arial,'ヒラギノ角ゴ Pro W3',sans-serif; } <\/style>");
}else{
  document.write("<style> body {font-family:Helvetica,Arial,'メイリオ','MS Pゴシック', sans-serif; } <\/style>");
}
// -->
</script>

ブラウザのUAを見て、font-familyを指定するという方法です。
iOS(iPhone,iPad)でも、UAに'Mac OS X'という文字が入っているのでこのロジックで特に問題なかろうと思います。

参考:userAgent(ユーザーエージェント一覧)
http://www.openspc2.org/userAgent/

こういうのを利用すれば、ある程度の問題は吸収出来るかと思います。


font-familyを指定しないほうが良い?

[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ! | DevAchieve
萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。

理屈よりも、実際にアクセスの多そうなサイトや商用サイトを参考にしたほうが良いと個人的には思います。

どういうフォントで見てもらいたいか?というのも、書き手側の主張であったりするわけですし、何も設定しないでも多くの人に、自分自身がイメージした内容を伝えたいと思うのなら、指定すべきだと思います。

実際、個人では確認できる環境が限られているので、これが定番の「font-family指定」とかがあると、悩まなくて済むという部分があるとは思います。

スポンサーリンク