スペースの幅

いわゆる「半角スペース」の幅って font-size の値に対してだいたいどのくらいの割合なの? ってのを調べる必要があったので、よく使う代表的な欧文フォントについてまとめてみた。どうやって調べたかというと、

<p><span>&nbsp;</span></p>

こんな感じのマークアップに、

p {
  font-family: "Arial";
  font-size: 1000px;
}
p span {
  background-color: red;
}

というスタイルシートを当てる。ブラウザで表示させてみて、赤いスペースの幅を測って font-size の値で割れば、そのファミリーのスペース幅の相対値がおおよそ算出できるはず。

じゃあまずは Windows XP での結果から。

なんとなく直感的に 0.5 em あたりじゃね? と思っていたので、こうしてきっちり数字を出してみると面白い。とくに Georgia の細さとか。

次、Mac。僕が CSS を書くときに上記 Windows フォントとよく一緒に組み合わせるフォントをチョイスしてみた。

やっぱり似たフォントはスペースの幅も近い。なんか妙に安心した。

ひょっとすると同じ OS でもブラウザによってレンダリングが異なる可能性はあると思うけど、Windows XP の Firefox 3.0 と IE 7.0 でまったく同じ数値だったので、まあどのブラウザでもほぼ一緒だと思われる。