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

この記事では、Adobe® Dreamweaver® CS3を使ってフォントやフォントサイズの指定を行う方法と、OS/ブラウザでの対応についての実験をご紹介します。

フォント指定

Dreamweaverで、CSSを使ってフォント指定を行う際、迷わず「ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3」を指定している方が多いのではないかと思います。

これは「ＭＳ Ｐゴシック」がなかったら「Osaka」、「Osaka」がなかったら「ヒラギノ角ゴ Pro W3」のように指定する手法ですが、今回はこれが本当に正しいのか、について考えてみます。

「ＭＳ Ｐゴシック」というフォント

「ＭＳ Ｐゴシック」と「MS ゴシック」というフォントがありますが、この違いである「P」はプロポーショナルを意味します。日本語フォントはバウンディングボックスという正方形内にデザインされていますが、このバウンディングボックスを無視して文字の形状に応じて文字幅を調整するのが「ＭＳ Ｐゴシック」です。
なんだかよさげに聞こえますが、ブラウザなど画面上で文字を読んでいくには字間がつまり過ぎていると感じる方もいるでしょう。

［ブロック］カテゴリの［文字間隔］に「1ピクセル」のように入力することで、字間を調整することができます。CSSのコードは「letter-spacing: 1px;」のように記述されます。

ちょっとこぶりな英数字

「ＭＳ Ｐゴシック」では英数字が少し「こぶり」です。［タイプ］カテゴリの［フォント］に「Verdana」を加え、「Verdana, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"」のように記述すれば、英数字のみ「Verdana」で表示されるようになります。

字間調整を行っている場合、若干、英単語の字間が開きすぎるような感はありますが、小さめの文字を読むときには、視認性が高まるでしょう。
とりあえず、Windows環境ではフォント指定（＋字間調整）は、これで読みやすくなりました。

ただし、欧文フォントと組み合わせるとベースラインが合わないため、リンク箇所などのアンダーラインが揃えるために「vertical-align:baseline;」を設定しておくとよいでしょう。

ここまでの指定をMacで表示してみます。私のMacではFirefoxで見ると「ＭＳ Ｐゴシック」で表示されてしまいます。
2008年1月にリリースされた「Office 2008 for Mac」や、その前バージョンである「Office 2004 for Mac」をインストールすると、「ＭＳ Ｐゴシック」や「ＭＳゴシック」、「ＭＳ Ｐ明朝」などのMS系のフォントがシステムに組み込まれてしまうのです。
購入するMacによっては、Officeのテストドライブ（デモ版）が入っており、同様に「ＭＳ Ｐゴシック」で表示されてしまいます。
「ＭＳ Ｐゴシック」で何か不都合が？？？　実はあるのです。日本語のプロポーショナルフォントという概念を持たないMacでは「ＭＳ Ｐゴシック」を表示すると、「く」のように文字幅の狭い文字や（）や「」などのカッコ類の送り（文字位置）が不自然になってしまいます。

対応策として「Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka」のように、「ヒラギノ角ゴ Pro W」を「ＭＳ Ｐゴシック」より前に出しておけばよいでしょう。

Macでは字間調整は不要

プロポーショナルという概念がないMacでは、文字をそのまま並べた状態で自然です。もちろん、好みにもよりますが、字間調整は不要でしょう。
このような場合には、セレクタの前に「* html 」をつけるルールを作成し、WindowsのInternet Explorerのみに異なる指定を行います。

日本語フォントを認識できないSafari

「"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"」のようにフォントを指定すると、Safariでは日本語フォントを認識できないため、「ＭＳ Ｐゴシック」が無視され、次候補である「Osaka」で表示されます。

Mac OS Xでの「Osaka」フォントは、アウトラインフォントとして扱われますが、ウエイトが重めに表示されてしまうので、文章内で強調などのために太字に設定したい箇所とのメリハリがつきにくいという欠点があります。
これを回避するためには「"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka」のようにアルファベット表記を加えます。

総称ファミリー名（generic-family）

Firefoxでは、"Hiragino Kaku Gothic Pro"を認識しないため、"ヒラギノ角ゴ Pro W3"を併記しておく必要があります。
最近では、ブラウザ以外のデバイス対応という課題が出てきました。ヒラギノ角ゴ Pro W3も、Osakaも、MS P ゴシックもないデバイスのために「sans-serif」のように「総称ファミリー名（generic-family）」を併記しておくとよいでしょう。

「sans-serif」は日本語でいう「ゴシック体」、「serif」は「明朝体」を指します。
「font-family: sans-serif;」のように指定すれば、とりあえずゴシック体で表示されますが、Windows環境では、半角の円マークがバックスラッシュで表示されてしまいますので、Windows用には避けるべきでしょう。

Macは「ヒラギノ角ゴ Pro W3」で表示、WindowsのInternet Explorerは「ＭＳ Ｐゴシック」、ただし英数字は「Verdana」、また、字間を少し空ける、といった目的をかなえるためには、次のように指定します。

字間調整や英数字の組み替えが不要であれば、次のようにまとめて記述します。

Dreamweaver CS3のデザインビューでは、CSSで日本語フォントを指定すると行間が開いてしまいます。上記のように指定すれば、これを回避できます。

メイリオへの対応

Windows Vistaでは、デフォルトのフォントに「メイリオ」が採用されました。「Verdana」の日本語版ともいうべきデザインの書体です。当然、Internet Explorer 7のデフォルトフォントも「メイリオ」が採用されると思いきや、Internet Explorer 7では「MS P ゴシック」がデフォルトです。

「メイリオ」のデザインが同じサイズでも横幅が広いため「メイリオ」で表示すると、レイアウト崩れが起きてしまうサイトが少なくないという配慮からInternet Explorer 7での採用を見送ったようです。

さて、メイリオを適用させたい場合には、次のように「MS P ゴシック」よりも前に「メイリオ」を指定すればよいのです。

Windows VistaではInternet Explorer 7のみですが、Windows XPにInternet Explorer 7をインストールしている場合、またはWindows XPに「メイリオ」のみをインストールしているなどの環境が考えられます。

「メイリオ」の場合、「Verdana」などの欧文フォントを組み合わせる必要もありませんし、また、字間を調整する必要がもありませんので、次のように記述すれば、Windows XPのInternet Explorer 6では「MS P ゴシック」、Internet Explorer 7（Windows XP/Windows Vista）では「メイリオ」で表示されます。

なお、Mac環境では「Office 2008 for Mac」のインストール時に「メイリオ」が組み込まれます。

次にフォントサイズです。
エラスティックレイアウト、マルチデバイス対応などのトレンドを受けて、レイアウトにも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のテキストズーム問題を回避できます。

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

パーセント指定

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

MacのFirefox

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

まとめ

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

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

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

「文章を読む」という行為が大きなウエイトを占める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