Dreamweaver記事

CSSでのフォント指定について

フォントサイズ

次にフォントサイズです。
エラスティックレイアウト、マルチデバイス対応などのトレンドを受けて、レイアウトにもemが使われることもありますが、やはりPCブラウザ上ではピクセルを念頭にデザインしている方がほとんどでしょう。となると、フォントサイズもピクセル指定するのがシンプルです。

Internet Explorerのテキストズーム

Windows版のInternet Explorerでは、フォントサイズをピクセル指定するとテキストズームに対応しないという仕様になっています。つまり、ブラウザの［表示］メニューから［文字のサイズ］→［中］を［大］に変更しても文字サイズが変わらないのです。

サイトのコンテンツ内で文字サイズ変更ボタンをもうけ、JavaScriptとCSSの組み合わせによってこれを回避する方法をとっているところもありますが、JavaScriptがオフの状態などには対応できないません。

Alternative Style: Working With Alternate Style Sheets（A List Apart）
http://www.alistapart.com/articles/alternate/

キーワード指定

「medium」「small」のように、フォント指定にキーワード指定を行うことで、Windows版Internet Explorerのテキストズーム問題を回避できます。

body {
	font-size: medium;
}

ただし、DOCTYPEによって基準となるフォントサイズが異なるため、キーワード指定を行う場合、そのことを視野に入れる必要があります。結論からいうと、DOCTYPE宣言を入れてキーワード指定を行うと、Windows版Internet Explorerでは、ひとまわり大きく表示されてしまいます。

パーセント指定

（多くの）ブラウザのデフォルトのフォントサイズは、16ピクセルであるため、「font-size: 75%;」と指定すれば、12ピクセル相当で表示されます。この場合にはDOCTYPEスイッチの影響も受けません。

body { 
	font-size: 75%;
}

MacのFirefox

過去にはMacとWindowsでブラウザのデフォルトフォントサイズが異なるという問題がありましたが、Internet Explorer for Macが16ピクセルを採用して以来、その問題はとりあえず、クリアされています。
ところが、Mac版のFirefoxのみ、デフォルトのフォントサイズに「14ピクセル」を採用しているため、アドビのサイトをはじめ、パーセント指定を行っているサイトでは、ひとまわり文字が小さく表示されてしまいます。
文字が小さい場合には、キーボードショートカットを使ってテキストズームを行ってもよいのですが、ぱっと見た目に「文字が小さい」という理由で、サイトから遠ざかってしまうユーザーもいるはずです。
下記のように記述することで、Windows版Internet Explorer以外には、ピクセル指定を行うことが可能です。

body {
	font-size: 12px;
}

/* for WinIE6*/

* html body { 
	font-size: 75%;
}

まとめ

フォントおよびフォントサイズの指定について、いろいろと取り上げてきました。中には「私は違う意見を持っている」という箇所があったと思いますが、下記についてはおさえておきましょう。

Dreamweaverのデフォルトの「ＭＳＰゴシック, Osaka, ヒラギノ角ゴ Pro W3」を用いると、MS OfficeをインストールされたMac環境で、カッコ類の送りが不自然になってしまう。
Safariでは日本語のフォント名を無視する。
フォントサイズをピクセル指定すると、Windows環境のInternet Explorer（6および7）でテキストズームができない。

ご参考までに私の中では、次のように落ち着いています。

body {
	font-size: 14px;
	font-family:  "Lucida Grande", sans-serif;
}

/* for WinIE6*/

* html body {
	font-size: 75%;
	font-family: Verdana, "MS P ゴシック", sans-serif;
	letter-spacing: 1px;
	vertical-align:baseline;
}

/* for WinIE7*/

*:first-child+html body { 
	font-size: 75%;
	font-family: 'メイリオ', Meiryo, sans-serif;
}

「文章を読む」という行為が大きなウエイトを占めるWebサイトの閲覧の中で、読みやすさを高める文字の設定について、

参照：

Yahoo! UI Library: Fonts CSS
http://developer.yahoo.com/yui/fonts/

CSSのfont-family：ヒラギノとＭＳＰゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html