webページでフォントサイズを指定することは
カテゴリ分け、
ユーザビリティー（ページの見やすさ、使いやすさ）、
見せたい部分の強調など
さまざまな意味を持っていると思います。
フォントサイズの指定は、
特に難しいわけではありませんが、
知っていて損をしない情報を紹介します。
単位について
フォントサイズを指定する単位にはpt em px % など、さまざまなものがあります。
一番わかりやすく、使いやすいのが、px指定だと
思います。
しかし、pxで指定してしまうと、
IEの場合、ブラウザで文字サイズを変更しても、
表示されている文字の大きさは変更されません。
ユーザビリティーを考えると、
文字サイズを固定してレイアウト崩れを
回避する場合以外はpx指定より、
%指定するほうが、ベターであると言えます。
%指定のうまい使い方
%指定するほうがベターではありますが、%だと、イマイチ文字の大きさが
イメージしにくいとは思いませんか？
そんなときは、簡単なルールを作って
しまえば、楽になります。
例えば、ページ全体のフォントを
75%に指定してしまいます。
75%に指定すると、12pxのフォントサイズに
なり、この大きさを基準にし、
さらに85%にすれば、約10px、
120%にすれば約14pxです。
よく使用するフォントサイズは
だいたい決まっていると思いますので
そのパターンだけ決めておけば
コーディングをよりスムーズに
行うことができるはずです。
- （htmlコーディング）
-
あいうえお（サイズ指定なし）
<div class="percent75">
あいうえお（75%）</div>
<div class="px12">
あいうえお（12px）</div>
<div class="percent85">
あいうえお（75% × 85%）</div>
<div class="px10">
あいうえお（10px）</div>
<div class="percent120">
あいうえお（75% × 120%）</div>
<div class="px14">
あいうえお（14px）</div>
- （cssサンプル）
-
.percent75 {
font-size:75%;}
.percent85 {
font-size:85%;}
.percent120 {
font-size:120%;}
.px10 {
font-size:10px;}
.px12 {
font-size:12px;}
.px14 {
font-size:14px;}
便利ツールについて
フォントサイズを%指定で決める場合、 「これは、いったい何pxなんだ？」と思った際は、私は
Firefoxのアドオンである「Firebug」
を使い、フォントサイズを調べています。
便利なアドオンなので、
使用されていない方には
おすすめします。
Firebugの使い方については
またの機会にお話します。
(私が理解している範囲でですが。。。)
HTML5＆CSS3の最新情報はこちら → HTML5GOGO
