近頃の、とあるR。

ウェブとしては、テキストはザックリ(ﾟДﾟ)と流し込み、ブラウザのレンダリングに任せて整形。細かい文字送りや禁則に左右されないデザインを心がけるのが理想の一つです。
しかし、毎度毎度そうはいきませんよねぇ。
字数を決めてコピーを書いてもらった挙げ句、macだけちょっと２、３文字飛び出て改行しちゃいます(ノ∀`)とかwindowsは字足らず気味になっちゃいます……等々を避ける為にも、テキストのズレを最小に抑えたいケースも多々。

最も簡単な方法

等幅フォントにしてしまうことです。
PSDデザインの時点で、「HiraKakuPro W3」か「MS　ゴシック」を使ってテキスト部をデザインしてもらいます。
これだけで、全角は大体合います。

厄介なのは実は半角

サンプルHTMLを用意しました。
このテストのAが通常の等幅フォント指定となります。（私の場合）
しかし、これですと、半角に差が出ちゃうんですよねぇ。「MS　ゴシック」の半角の方が細いのです。

全角指定が先の場合

Aの書き方
font-family:”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳ ゴシック”,Helvetica,Arial,sans-serif;
では、全角フォントを先に指定し、その後半角フォントを指定しています。
しかし、この指定方法では、半角も「MS　ゴシック」に（つまり細く）なってしまうんですよね……

半角指定が先の場合

Bの書き方
font-family:Helvetica,Arial,sans-serif,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳ ゴシック”;
では、逆に、半角フォントを先に指定しています。
しかし、FireFoxとMacのSafari以外、つまりwindowsの殆どのブラウザでは、全角フォントの指定が無視されてしまいます。よって、ツカエナイパターン。

バッチリ合わせるには

まぁ、Aで良いと思います。実用的には。半角でズレますけど。
そこもバッチリ合わせたいんじゃー！！と言う場合は、
Cの方法。
全角に font-family:”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳ ゴシック”;
半角に font-family:Helvetica,Arial,sans-serif;
全角と半角で異なるフォントを割り当てるしかなさそうですOrz
もっとマシな方法を発見したい(ノ∀`)