REDLINE MAGAZINE | font-size:82% って何?

font-size:82% って何?

なんとなくずっと気になってた事があったので書いてみる。

とある友人がcssにいつも(かどうかは知らないけど)「font-size:82%;」を指定してるのを見て「なんでこの『82』という数字が出てくるんだ、男らしく80とかキリのいい数字にしやがれっ、コンチクショー！もちろん良い意味で。」とかひっそり思っていたわけですが、その『82』という数字が気になって気になって仕方ないので･･･

とりあえず計算してみる。

前提として、ブラウザのデフォルトはどれも16pxであると仮定。
(根拠は過去に何かでそう書いてあるのを見た記憶がある！間違ってたらすみません)

まず私がフォントサイズを%で使う際には80%を指定する事が多い。理由は多分何かの本かサイトで12px相当にするには80%にすればいいっていうのを見たからだったように記憶している。となると、計算式はこうなるんだと思う。

16px x 0.80(80%) = 12.8px

小数点以下を切り捨てで12px相当っていう意味なんだととりあえず解釈。

となると、問題の82%はというと、計算計算。

16px x 0.82(82%) = 13.12px

ということは、小数点以下を切り捨てて13px相当を狙っているという事なんだろうか。でも私の頭の中の記憶によるとディスプレイのなんたらかんたらの関係で80～84%は同じサイズに見えるはずなんだ。80%と差を付けるのは次は85%でないと変化なかったように記憶している。ということで･･･

とりあえず表示確認してみる。

実際80%と82%の差をブラウザごとに検証してみる。
検証したのはwinで4ブラウザのみ、なんだけど、以下の結果になった。

とりあえずOperaでは随分差があるといった感じだが、その他はテキスト部分の画像を重ねてもまったく一緒。んじゃ13px相当説は間違いなのかしらん。

ちょっと待て。pxにして確認してみる。

pxで指定すると問題ない模様。問題ないというか、ちゃんと差が出る。文字を重ねてみると１文字１文字の大きさは一緒だけど幅が違う感じ。偶数pxと奇数pxの関係はいつもそんな感じ。これが14pxになると文字自体がデカくなる。

んじゃ85%はなんでデカくなるのか？

上で書いたとおり、85%を指定するとサイズがデカくなるのがちゃんと目視確認できる。でも計算してみると･･･

16px x 0.85(85%) = 13.6px

上に書いた小数点以下切り捨て理論は却下。四捨五入説も80%の時は12.8だから辻褄が合わない。ということで仕様書を見てみる。
>>15.2.4 Font size
その箇所の「actual values(実際の値)」のリンク先を見てみると、『原則として計算値がそのまま使われるけど、エージェントの環境次第で、その値を使えない場合がある。その場合、計算幅に近づける必要があるので実際の値は、近似値が適用された後の計算値になる。』という事らしい。

小数点以下切捨てでもなく、四捨五入でもなく、近似値。
そうだ。上でも書いたディスプレイのなんたらかんたらの関係の話も確かそんな話だった。でもせっかくここまで書いたのでそのまま投稿してしまおう･･･。

ついでなので、%とpxのフォントサイズを比べておく

>>フォントサイズ比較サンプル

一応、IE、Fx、Opera、NN、Safariで確認してみたのだが、72%がすこぶる怪しい。ブラウザによって次の段階まで大きく表示されたり小さいままだったりする。(見てる環境にもよるんだろうけど) 11pxってのはなんか一応流れ的に入れてみただけで左の%と対応はしてないっぽい。一応font-family:"ＭＳ Ｐゴシック";を指定してあります。

で、結局82%は何だったのか。

なんか結局ワカラナイ。
PCのディスプレイだけの話じゃないんかな。よくわからない。でもなんか悔しいから本人には絶対質問しないぞ。

070605追記：コメント欄にて麦さんに素敵な回答を頂いた。
>>font-size指定 | d-spica
すごい勉強になりまくりでした！ありがとうございます。

どうでもいい話。

全然この話に関係ないけど仕様書見てたら面白い事書いてあった。
>>4.3.2 Lengths
ここの「Pixel units are relative to the resolution of the viewing device,･･･」以下の文。もし出力デバイスがよくあるものとかなり異なる場合はこういうのを考えろよみたいな話だと思うんだけど、「普通の腕の長さは28インチなので、その視覚の角度は約0.0227度。その腕の長さ分離れて見るには1pxは0.28 mm (1/90 inch)にあたる。」とかめっちゃ細かい。すごいな。やっぱり仕様書ってすごすぎる。
もちろん良い意味で。

2007年06月01日 12:40 | Red | パーマリンク