2009年12月11日

font-sizeを%で指定するときにちょっと便利な一覧表

こんにちは、溝上です。

今回はfont-sizeを%指定するときにちょっと便利(かもしれない)font-sizeの指定方法をご紹介します。

以前の記事で先輩がfont-sizeについて書いていますのでぜひこちらも御覧下さい。

以前の記事で先輩はこう書かれています。
(bodyに)75%に指定すると、(サイトの基準が)12pxのフォントサイズになり、この大きさを基準にし、さらに85%にすれば、約10px、120%にすれば約14pxです。
※(〜)は私が足しました。

ただ、この文章内の『約』が示す通り正確なフォントサイズではありません。
ほとんどのブラウザでデフォルトの文字サイズは16pxになっていますので、
先輩の書かれた通りにfont-sizeを指定すると

16px × 0.75 × 0.85 = 10.2px
16px × 0.75 × 1.20 = 14.4px


となります。
ブラウザによっては小数点以下も反映されたり、line-heightの値にも影響します。
そこでなるべく小数点以下を含まない(もしくは無視できるほど小さい)値まで細かくfont-sizeを指定する必要がでてきます。

16px × 0.75 × 0.84 = 10.08px
16px × 0.75 × 1.17 = 14.04px


こんな感じです。
ただ、いちいちこんな計算していられませんよね。

というわけで一覧表を用意してみました。


基準フォントサイズ:12px (16px × 75% = 12px)
目標サイズ 8px 10px 12px 14px 16px 18px
指定% 67% 84% 100% 117% 134% 150%
実際のサイズ(px) 8.03333px 10.0833px 12px 14.0333px 16.0833px 18px


おまけで基準サイズが14pxの場合もご紹介します。
基準フォントサイズ:14px (16px × 87% = 14.0833px)
目標サイズ 8px 10px 12px 14px 16px 18px
指定% 57% 71% 86% 100% 114% 128%
実際のサイズ(px) 8.03333px 10px 12.1167px 14.0833px 16.05px 18.0333px
※実際のサイズはFirefoxのプラグイン『Firebug』を使用して算出しています。
※目標サイズをギリギリで超える%を指定しています。


いかがでしょうか。
私の場合、よく使う10px〜14pxあたりの%を覚えて使っています。
基準サイズが12pxのサイトで一回り小さくしたいときは84%、
基準サイズが14pxのサイトで一回り大きくしたい場合は114%、といった具合です。

posted by baba at 15:06 | Comment(0) | TrackBack(0) | 情報
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。