Webページのフォント指定

Webページにフォントを指定するときの、たまに見かける間違い。
Osaka が太すぎて読みづらい！
本文の書体として Osaka が指定されていて、Mac OS X で見ると太すぎて読みづらい。Mac OS 9 以前の標準書体であったことや、一時期一部の人の間で Osaka がはやったこともあって、その名残だろうと思う。
まず Windows に標準で入っている和文フォントは次の通り。

次に Mac OS X

Mac に Microsoft Office をインストールすると、ＭＳ (Ｐ)明朝/ゴシックが同時にインストールされる。
Osaka は 平成角ゴシックW5 + Geneva Regular 相当。また、ＭＳ ゴシックはリョービゴシック-B相当。どちらも本文としては太すぎるので、他のフォントがある場合は避ける（わざと太くする場合はこの限りではない）。
したがって、本文にサンセリフ + ゴシック体を指定する場合は次の順で行う。

テストコード。Mac OS X 10.6 + Safari 4.0.4/Camino 2.0.2/Opera 10.10 で確認。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Webページのフォント指定</title>
        <style type="text/css">
            body {
                font-family: "Georgia",
                    "ヒラギノ明朝 Pro", "メイリオ", "ＭＳ 明朝",
                    serif;
            }
            h1 {
                font-family:
                    "Helvetica Neue", Helvetica, Arial,
                    "ヒラギノ角ゴ Pro", "メイリオ", "ＭＳ ゴシック",
                    sans-serif;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1>Web ページのフォント指定</h1>
        <p>Web ページのフォント指定</p>
    </body>
</html>

※Windowsでヒラギノフォントをインストールしていると表示が汚くなることがあるので、和文はserif/sans-serifのみ指定するのがよいかも。

参考