フォントの高さ問題

最近はテキストをスタイルシートでデザインする機会も多いので、この問題を少し書きます（解決はしません）。以前からよく悩ませてくれたのは、リストのマークを背景で指定する場合。結局ブラウザ毎にハックするか、IEを優先してなんとか不自然でないところで妥協していました（最近は背景画像にせず、ブラウザに任せる方がいいと思ってます）。

いくつかのブラウザ、フォントの違いは下のような感じです。
フォントは、Windowsでは「メイリオ」と「sans-serif（MS ゴシック）」、Macは「ヒラギノ」。インライン要素への指定で、paddingは「0」としました。メイリオの場合、Windows FirefoxもChromeも同じ見え方だったので割愛。

こうして比較するとブラウザの違いはほとんどなく、OSとフォントによる違いです。大きく特徴は２点。

• Windowsの「メイリオ」の高さが異常に高い。「MSゴシック」の高さで指定したスタイルは必ずおかしくなります。
• Macでは高さがおよそキャップハイト（アルファベット大文字の高さ）なので、「y」の下がはみ出しています。ただ厳密にはキャップハイトではなく若干の余白があります。

ちなみに、Safariではfont-familyに「sans-serif」だけ指定すると、英語部分のフォントがヒラギノではないもの（おそらくHelvetica）になります。この時、アルファベットは若干小さくなり「y」の文字も背景からはみ出さなくなります。おそらくMacの場合、この高さが基準になっているようです。

高さとは関係ありませんが、MacのFirefoxはきちんと「A」と「y」の間のカーニングができています。ブラウザによるフォント表示の違いも多少はあるみたいですね。