サイト制作時のフォント指定の総集編2009冬。

【2010.2.28追記】cssのフォント指定を完璧にするぜ2010 Spring with jQueryという記事を新しく書いたので、そちらもぜひ！

面倒が嫌いな人は以下をコピペで

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

body {
    font-size: 62.5%;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    line-height: 1.8;
}

普通は、これで十分です。

ここから先が本番です

cssでのフォント指定は、非常に難しい。ウェブ上でのフォントは、印刷物とは違い、見る人の環境に左右され、その環境も千差万別だからだ。

だからこそデザイナーは、様々な環境に配慮したデザインをしなければならないし、コーダーは、より多くの環境で読みやすいフォント指定をしなければならない。と、僕は思う。

今回は、現時点で僕が行っている手法を、なぜそうするのか順を追って説明していきたいと思う。ひとつ断っておくが、僕の手法は別に正解ではないし、もっと良い方法もあるだろう。こういう手法もある、と捉えてもらえると有難い。

フォントサイズを1em=10pxにする

最初に、フォントサイズを1em=10pxに初期化する。Fireworksなどで作成されたデザインであれば、フォントはpx単位で指定されているはずなので、これをやっておくと、デザインを落とし込む際のフォントサイズ指定が非常に効率よく行えるようになる。

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

body {
    font-size: 10px;
}

h1～h6は、デフォルトで文字サイズが設定されているので、それを100%で親要素と同じにする。bodyで全体の基準となる文字サイズ10pxを指定する。これで、1em=10pxになった。

例えば、文字サイズを12pxにしたい場合は、font-sizeを1.2emと指定すればよい。ただし、既に親要素が1.2emと指定されていれば、さらに子要素で1.5emと指定した場合、12px×1.5em=18pxとなる。計算が面倒になるから、font-sizeは、できるだけテキストを直接囲むタグに指定したほうがいいかもしれない。

IEでブラウザ側の文字サイズ変更を可能にする

実は、このままだと、IEでブラウザ側の文字サイズ変更ができない。原因は、フォントサイズを絶対値で指定しているから。IEで文字サイズを変更できるようにするには、フォントサイズを相対値で指定しなければいけない。

IEのフォントサイズの初期値は1em=16px。これを1em=10pxにするには、0.625をかければいい。具体的には以下のように記述する必要がある。

body {
    font-size: 62.5%;
}

もちろん上記を指定する必要があるのは、相手がIEの時だけだ。IE以外では、絶対値で指定したほうが、ブラウザ側の初期値に振り回されずに済む。IEのときは62.5％を。IE以外には10pxを指定したいので、ここでは、IEの条件分岐コメントを使用して、それぞれ読み込むｃｓｓファイルを振り分ける。

<!--[if IE]>
    <link href="basefontsize_ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>-->
    <link href="basefontsize.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css">

上記は、HTML文書のhead内に記述する。IEには「basefontsize_ie.css」を読み込ませ、それ以外には「basefontsize.css」を読み込ませている。最後の「style.css」が、共通のスタイルシートだ。

/*
 basefontsize_ie.css
-------------------------*/
 
body {
    font-size:62.5%;
}
/*
 basefontsize.css
-------------------------*/
 
body {
    font-size:10px;
}
/*
 style.css
-------------------------*/
 
h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

・・・このスタイルシート3分割は、非常に無駄な感じがするでしょう。別に分岐させないで、どのブラウザでも62.5％でいいじゃん。と思うかもしれない。実際、僕も面倒なときは62.5％にしている。しかし、62.5％という数値は、IEを基準とした値なので、いわばIE向けのハックにすぎない。ブラウザで文字サイズ変更できないIE向けのハックとしての記述を、他のモダンブラウザに適用するのはおかしいのである。・・・ということに、しておこう。

IEのUTF-8で文字サイズがおかしくなるアレに対応

またIEが来た。フォントサイズを62.5％で初期化したときに、文字コードがUTF-8だと、10px（11px?）相当の文字が12pxで表示される、なんとも味わい深いバグがある。今はMTもwordpressもUTF-8の時代だから、これは放っておけない。このバグは、フォントファミリーで日本語フォントを指定すれば解決する。

・・・だが、それが、やっかいだ！！

osやブラウザによって最適なフォント指定を

CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係

上記を読んでいただければ分かると思うが、読むのが面倒な人のためにまとめると、

  • フォント名の表記は日本語と英語の両方を指定したほうがいい。
  • MSゴシックの入ったMAC。ヒラギノの入ったWIN。は、フォントがキレイに表示されない。

と、なる。とりあえず、cssでのフォントファミリーの指定は、先に指定したものが優先されるので、被害が少ないと思われる順に並べてみよう。

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

上記指定で問題が発生するのは、「ヒラギノの入ったWIN」のケースだ。

実は、僕のWindowsにもヒラギノが入っているが、ヒラギノが指定されているページは、文字がところどころ太くなっていて読む気が失せる。人は、痛みを知っているから、優しくなれる。そんな当たり前のことに、ようやく気が付いたよ。

上記「webデザイナーのナナメガキ」さんのページでは、winとmacを判定して、それぞれ別のスタイルを読み込ませるようにしている。完璧を目指すなら、この方法を採用するといい。

あ、そうそう、最後に、line-height（行間）の指定は、単位なしで指定する。そうすれば、font-sizeの変化に対応してくれる。

まとめ

この記事の内容をまとめたものが以下。

<!-- html head内 -->

<!--[if IE]>
    <link href="basefontsize_ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>-->
    <link href="basefontsize.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css">
/*
 basefontsize_ie.css
-------------------------*/
 
body {
    font-size:62.5%;
}
/*
 basefontsize.css
-------------------------*/
 
body {
    font-size:10px;
}
/*
 style.css
-------------------------*/
 
h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    line-height: 1.8;
}

・・・うーん、やっぱり長いよね。ごめんなさい。

【2010.2.28追記】cssのフォント指定を完璧にするぜ2010 Spring with jQueryという記事を新しく書いたので、そちらもぜひ！

XHTML&CSS超高速コーディング術

XHTML&CSS超高速コーディング術

現場では、スピードが命！